feature: first class Jest integration

(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!

[sodatea]

Seems --experimental-loader is useless here.

But I have successfully worked around the async resolver issue, by moving the module resolution logic into the transformer (with the help of es-module-lexer). And some other small hacks can be wrapped in a custom vite-jest command.

So here it is: a very early-stage proof-of-concept implementation: https://github.com/sodatea/vite-jest Available on NPM https://www.npmjs.com/package/vite-jest

(I’ve accidentally made @vue/test-utils@next a hard dependency in v0.0.1. Anyway, I’ll continue working on this tomorrow. Time to go to bed now)

[schalk-b]

Thank you for your hard work on this issue @sodatea. I’ve setup a small monthly contribution of appreciation.