Using Jest with React
Last updated on • Available in French
Setting up Jest + React Testing Library in an Interview environment
In Interview React environments, we use Vite as the bundler and dev server for your React project. We chose Vite for its simple setup, out-of-the-box TypeScript support, and hot module reloading. Unfortunately, the integration between Vite and Jest is still a work in progress.
To use Jest in your React project, we suggest using Babel to transpile your code. Our recommended approach is largely borrowed from this Egghead.io course. In this example, we will also be installing Testing Library for React.
First, you will need to install several dev dependencies:
# Babel Dependencies npm install -D @babel/preset-env @babel/preset-react @babel/preset-typescript # Testing-library Dependencies npm install -D @testing-library/react @testing-library/jest-dom @testing-library/user-event # Jest Dependencies npm install -D jest jest-environment-jsdomCode language: PHP (php)
Add a Babel config file in the root of the project called
Lastly, add a Jest config file and setup file in the root of the project called
At this point, you can add npm to your scripts to run Jest.
Now, you can run
npm run test or
npm run test:watch in the interactive shell to run the unit tests in your React project.
You can test this out in the sandbox below: