feature: first class Jest integration

[threepointone]

(previously...)

Making an issue to track work on the Jest experience with vite.

Jest is a very popular JavaScript testing framework. Some standout features:

• Support for mocking functions and modules
• Parallelisation and prioritisation of tests
• Snapshot tests
• Running only changed tests between 2 revisions (or based on a set of files)

It would be worthy to provide some form of blessed integration to use with vite.

(If you don't need these features, you may be better off using a testing framework like uvu, which should be much simpler to setup.)

• Files could be transformed with esbuild to make jest tests startup and run faster (prior art: esbuild-jest, esbuild-jest-transform).
• Files could share the same transforms that vite already uses for newer syntax (for example, support for import.meta via babel-plugin-transform-import-meta) until jest ships full support for ES modules.
• Files could have jest.mock() calls hoisted above imports with babel-plugin-jest-hoist (explanation) until top-level await lands fully in esbuild, at which point you could codemod all tests to use tla imports, and remove the babel plugin. (This still requires support from jest for ES modules, or else it won't detect tests defined after a couple of ticks have passed.)
  • This exists as an swc package too, which is very appealing (via vite#788).
• I think jest uses babel-plugin-istanbul for coverage. This may never land in esbuild.

@yyx990803 mentioned spinning up a ViteDevServer and using vite.transformRequest() as the transform. One problem here is that the jest transform is expected to be synchronous. Jest's likely going to fix this as part of the ES module work, tracking here. (Further, it's not clear to me what the devx would be? Should we run a vite server in a seaparate process/terminal tab? Or should we introduce a vite test command that wraps jest?

---

Let me propose a first step: in my own repo I'm going to do the bare minimum: esbuild-jest (possibly modified) + babel-plugin-transform-import-meta + babel-plugin-jest-hoist + babel-plugin-istanbul. Anything I'm missing? What are the vite specific bits to inject into the environment? Discuss!

[yyx990803]

The main issue I see for not leveraging Vite itself for the transforms is that you won't get Vite plugin compatibility in Jest - e.g. if you add a Vite plugin that does some custom transforms, it won't apply to the Jest files. So this would still require Jest-specific transforms for e.g. Vue or Svelte files. I think your approach would work for J/TSX-only projects but not all Vite projects.

Another aspect of this is Vite configured alias and defines - they'd be automatically covered if the files are transformed by Vite, but you'd have to manually read the config and replicate them in your setup.

The ideal situation is to let Vite transform the files to how they'd run in Node (reusing part of the SSR transform logic), but Jest requiring transforms to be synchronous seems to be a major blocker here. Judging from jestjs/jest#9504 it seems there isn't much progress on this front :/

[threepointone]

Yeah this has been running around my mind as well.

One idea I had, because it's all so fast, is to just do a build (without minification and concatenation) and have jest operate on that. 🤔

[threepointone]

The PR for jest's async transform support jestjs/jest#9889

[threepointone]

Ok I think I have ideas for hackzz. I'm going to try some stuff out, as and when I have time in the evenings. Will get back to this thread this weekend.

[nathanforce]

Yeah this has been running around my mind as well.

One idea I had, because it's all so fast, is to just do a build (without minification and concatenation) and have jest operate on that. 🤔

@threepointone I've been playing with this concept using esbuild for a little while. I'd be happy to compare notes if you'd like. Here's an example of what my tests look like.

That repo is a repro for a leak issue so it is stripped of anything non-essential, but the same pattern could be used in jest/ava/uvu.

[mpeyper]

Just for anyone looking for something for right now, we wrote a (probably naive) Babel plugin that handles import.meta.env, import.meta.glob(...) and import.meta.globEager(...) transforms for our jest tests. I'm not sure what other custom transforms vite has, but this is what we needed for our project.

We have discussed extracting this into a stand alone package and publishing it if there is any interest in others using it.

[JacobMGEvans]

Just for anyone looking for something for right now, we wrote a (probably naive) Babel plugin that handles import.meta.env, import.meta.glob(...) and import.meta.globEager(...) transforms for our jest tests. I'm not sure what other custom transforms vite has, but this is what we needed for our project.

We have discussed extracting this into a stand-alone package and publishing it if there is any interest in others using it.

Was needed for enabling our Orgs OSS contributing to a Vite project since a majority of our group is familiar with Jest it seemed worth the extra effort!

It is now successfully running Jest + React Testing Library, locally and in GH actions

[mpeyper]

Just for anyone looking for something for right now, we wrote a (probably naive) Babel plugin that handles import.meta.env, import.meta.glob(...) and import.meta.globEager(...) transforms for our jest tests. I'm not sure what other custom transforms vite has, but this is what we needed for our project.

We have discussed extracting this into a stand alone package and publishing it if there is any interest in others using it.

We ended up cleaning it up a bit and publishing it to NPM (source code).

[xiaoxiangmoe]

@yyx990803 async code transformations are implemented by jestjs/jest#11191 and it was released in jest 27.0.0-next.5

[axe-me]

I'm trying to write a vite jest preset recently. Now I got a blocker, that I need jest to allow async resolver to allow vite to do module resolving. see jestjs/jest#11226 (comment) and jestjs/jest#9505
Without a custom resolver, features like virtual ID, etc won't work.