Next.js with Jest + React Testing Library

I have to admit that Jest with React Testing Library is my favorite way of doing unit testing. Enzyme was never my thing. I love the approach of React Testing Library that tries to make you test like an user, it even helps you detect accessibility issues.

Well what I'm trying to say is that I'm really excited to try to do this integration. As always I'm going to follow the documented published in Next.js site and hope for the best, here we go.

There are different ways to get your Next.js project with Jest and React Testing Library running, first you can just create a project from zero with this command.

npx create-next-app@latest --example with-jest with-jest-app

But, I want to try to integrate it to the same project that I have been working on. So according to the documentation I can set up Jest with Rust or Babel.

Rust is a memory-safe compiled programming language for building high-performance systems. It has the simplicity of high-level languages (Go, Python), but the control of low-level languages (C, Cpp)

If you want to know more about Rust, here is a small video by Fireship that explains it. Also the github associated to the video is really good.

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments (https://babeljs.io/)

I think I'm going to go with Rust.

Since the release of Next.js 12, Next.js now has built-in configuration for Jest

So I'm going to install jest, jest-environment-jsdom, @testing-library/react, @testing-library/jest-dom using the following command

npm install --save-dev jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom

Then we have to create the following jest.config.js file

Under the hood, next/jest is automatically configuring Jest for you, including:

• Setting up transform using SWC
• Auto mocking stylesheets (.css, .module.css, and their scss variants), image imports and @next/font
• Loading .env (and all variants) into process.env
• Ignoring node_modules from test resolving and transforms
• Ignoring .next from test resolving
• Loading next.config.js for flags that enable SWC transforms

The I'll add a script for testing in the package.json

Following Jest's convention I'll create a __tests__ folder and add a test to check if the <Home /> component successfully renders a heading:

And I'm going to run the testing script to see if everything is ok.

The documentation also says that I can add snapshots tests, I know that many people don't like them but for I have to admit that more than once snapshots allowed me to catch changes that I didn't made on purpose. So I want to see how to include them now. So I'll create a new file called snapshot.js

And now I run my testing script again

If you are reading this as part of the serie of Trying Next.js you can see that before this I tried Next.js with Cypress so I think I'll do something similar and test the same, I'll change my index with a message that reads "This is 0" and a button that everytime you click it the number in the message increments by one. And of course every test fails.

So let's update the test file for the index and update the snapshot

And there you have it, tests running OK and I think that is it for now.

Any comments or questions are welcome

Cheers!