Adding Jest with TypeScript Support to a Vite Application

The app is built on top of vite instead of the more popular create react app. The benefit of vite is that it installs and builds extremely quickly. One of the downsides of vite is that it doesn't come with any out-of-the-box testing support. It also has its own esbuild-based compiler, which is not currently compatible with jest, so we have to configure JSX & TypeScript support for jest even though vite handles that already for our app.

This lesson requires installing a handful of modules:

npm install -D jest
npm install -D @testing-library/react @testing-library/jest-dom @testing-library/user-event
npm install -D @babel/preset-react @babel/preset-typescript @babel/preset-env
npm install -D identity-obj-proxy

Each of them serves an important purpose:

• jest runs our tests
• @testing-library/react adds the ability to render react components inside of our test environment
• @testing-library/jest-dom allows us to assert that components are in the DOM and contains certain text and classes
• @testing-library/user-event allows us to interact with rendered components programmatically
• @babel/preset-react, @babel/preset-typescript, and @babel/preset-env allow us to use ES6 Modules, JSX, and TypeScript in our tests
• identity-obj-proxy is helpful when rendering CSS modules so that we can see the original class names instead of obfuscated ones

We also have to add numerous config files such as babel.config.js and jest-setup.ts which are required to enable all of this functionality.

We put our jest config in our package.json file which works well, but you can also put it in a file named jest.config.ts or jest.config.js. See the Jest Configuration Documentation for more details about configuring jest.