Unit Testing in React - Bye Jest!

Jest has been the default test runner for years now and was a big improvement at the time. But Jest has failed to keep up with the rest of the JS ecosystem, in particular the endless asterisks next to ESM support. I am jealous of languages like Rust that don't constantly reinvent or battle for basic things like test runners or package managers

If you use TypeScript (and I hope you do!), you have an additional problem with Jest because it doesn't support TS out of the box, most relying on ts-jest which has also fallen into disrepair. TSC is too slow for anything large - esbuild and vite have completely crushed this problem. Enter Vitest, a drop in replacement for Jest, but with a modern engine under the hood.

The developer experience in Vitest is amazing. This next generation of tooling is so smooth and intuitive it really helps you to be productive. It supports workspaces for monorepos easily, and has a sweet little vscode plugin. Vitest is adding new capabilities for UI testing with a real browser, as opposed to jsdom. This opens up a whole new avenue of UT that Jest could never do. It has a beautiful @vitest/ui interface as well, reporters, and integrations with other CI infrastructure.

The biggest payoff though is that your test compilation target and your browser target are the same - ESM. Because Jest ultimately relies on CommonJS, some features you want to use like top level async /await are not available in your tests, so you are held back and have to work around that.

This next level of tooling builds upon all of the other amazing advancements in TypeScript compilation, module bundling, and new standards of JS support in node.js. The level of polish in their documentation and completeness of the solution has raised the bar - give it a try in your project!