🪟 🔧 Use jest directly as test runner #21174
Conversation
| @@ -0,0 +1,12 @@ | |||
| module.exports = { | |||
| env: { | |||
| test: { | |||
There was a problem hiding this comment.
ℹ️ Add the require babel configuration (that babel-jest will read) that is required to transform our code. We only add this when running in the test environment, to not potentially collide with any configuration of Create React App, while we're still using it to build the rest of the app.
| @@ -0,0 +1,21 @@ | |||
| // eslint-disable-next-line jest/no-jest-import | |||
| import type { Config } from "jest"; | |||
There was a problem hiding this comment.
ℹ️ Actual jest config, compiled from our previous package.json plus some additional config we need now, since CRA doesn't take care of it anymore.
| "\\.module\\.scss$": "test-utils/mock-data/mockIdentity.js", | ||
| "\\.(css|png|svg|scss)$": "test-utils/mock-data/mockEmpty.js", | ||
| }, | ||
| setupFilesAfterEnv: ["./src/test-utils/setup-tests.ts"], |
There was a problem hiding this comment.
ℹ️ Moved this file (and the classname-serializer) into src/test-utils, since we no longer require it to be at src/setupTests.ts, which CRA forced us to.
| "\\.module\\.scss$": "test-utils/mock-data/mockIdentity.js", | ||
| "\\.(css|png|svg|scss)$": "test-utils/mock-data/mockEmpty.js", |
There was a problem hiding this comment.
ℹ️ Make sure we mock asset imports in a way that jest test run properly.
| import "../globals"; | ||
|
|
||
| // jsdom doesn't mock `matchMedia`, which is required by react-slick | ||
| Object.defineProperty(window, "matchMedia", { |
There was a problem hiding this comment.
ℹ️ Rewrote this mock slightly from what we had beforehand here, to align with what jest actually has in their documentation: https://jestjs.io/docs/26.x/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
What
This is part of moving our build system from CRA to Vite. Since Vite doesn't have any test runner build in we need a solution for running our tests without Create React App. We use jest directly for doing so (elaboration see below).
This PR already switches the tests to run via Jest directly, since we can extract that into a separate PR, since it does not require Vite in any way.
How
This changes the
npmscripts to run tests from using CRA (viacraco) to usejestas a command directly. It also adds the required configuration files we'll need to run the tests.We continue to use babel as a transpiler for jest (instead of using esbuild that we plan to use with vite for actual bundling), since the jest babel integration works better and supports jest mocks hoisting mechanism properly (which esbuild doesn't).
For more details view my inline comments.
Why jest?
We also looked at vitest as an alternative to run tests. We decided to stay with jest/babel for tests for some reasons:
jestin the past - never change a running systemWe also looked at integrating jest with vite via
vite-jest. Given the rare updates of the library, low download rate and felt immaturity, we decided not to go that route.