[Feature]: expect library vite support

[kkimdev]

🚀 Feature Proposal

Currently expect library is unusable with vite:

| 11:34:12 PM [vite] warning: 
| ./.vite_generated/deps/expect.js
| 13064|            try {
| 13065|              const moduleUrl = (0, _url().pathToFileURL)(filePath);
| 13066|              const importedModule = await import(moduleUrl.href);
|    |                                                  ^
| 13067|              if (!applyInteropRequireDefault) {
| 13068|                return importedModule;
| The above dynamic import cannot be analyzed by Vite.
| See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.
|   Plugin: vite:import-analysis
|   File: ./.vite_generated/deps/expect.js?v=bb9d55bc

Motivation

Both vite and expect are popular libraries. We use expect on our server side codebase, but can't on client side due to this issue.

Example

No response

Pitch

Because it's a fundamental limitation of expect codebase.

[SimenB]

Do you have a full reproduction? Somewhat surprised vite is unable to analyze the import.

[kkimdev]

I tried to create a minimum reproduction example here:

https://github.com/kkimdev/expect-vite-reproduce/tree/main

steps:

1. clone the above repository
2. execute npm install
3. execute npx vite
4. open http://localhost:5173 in a brower

Result:

The above example is a fresh project using npm create vite --template react-ts and all I've done is importing expect in src/App.tsx. For some reason, it stuck at a different place, but it looks like expect doesn't work with vite out of the box anyways...

[SimenB]

Interesting it tries to do some fs stuff...

expect should for sure work in a browser setting, so let's see what we can do

[kkimdev]

That would be really great! expect is our assertion library of choice, and would love to use in more places!

[eryue0220]

I added a vite plugin vite-plugin-node-polyfills, the previous error disappeared. But it had a new one produced by the jest-util/src/isInteractive.ts#L10 as shown in the picture.

Because it's the process.stdout didn't polyffill in the plugin. And I did not find out a way to solve this, maybe some one who is good at vite or other bundler tool can give more help informations.

[kkimdev]

I guess this issue is not really specific to Vite since some of the errors are due to node library usages.

[kkimdev]

I think ideally expect should work out of the box on browsers without third party transformations.

[eryue0220]

Yes, I agree. But currently Jest still needs some additional work to implement. It may include adding another bundler tool to satisfy it can be used in a browser environment. this needs some investigation. And this maybe added in Jest v30? @SimenB

[SimenB]

I'd love to see #12348 picked up. Can start with the more reusable modules (like expect)

[eryue0220]

I'd love to see #12348 picked up. Can start with the more reusable modules (like expect)

Cool~ Is there any plans for this PR?

[SimenB]

PR welcome 🙂

[eryue0220]

PR welcome 🙂

Ok, I will do it later. Currently I am ready for IELTS Test. 🥶

[SimenB]

With the node polyfills linked above, I only need to fix the process.stdout thing mentioned above. That's due to defunctzombie/node-process#41. Easy enough to fix 🙂 Let's start there

[kkimdev]

This is great, thanks!

btw, how about having a node module shim layer that uses node module if available, or falling back to browser polyfill. In this way, it's no longer dependent on build time transformation.

e.g.,

import * as af from 'node_shim/fs'  // Imports `fs` on node, polyfill version on browser/

It looks like vite-plugin-node-polyfills is using https://github.com/niksy/node-stdlib-browser underneath .

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.

[SimenB]

https://github.com/jestjs/jest/releases/tag/v30.0.0-alpha.1