Setting Up Testing Library with NextJS
Getting setup with Jest and React Testing Library
Last week, I started working on a new NextJS application. After getting my application setup and deployed to vercel (which is amazing), I wanted to write some tests. The first thing I did was check the NextJS documentation and looked for instructions on how to get started with testing.
After trying and failing to find anything in their documentation, I resigned myself to figuring it out myself. So I created a new NextJS project using
create-next-app, and got started.
Setting up testing with NextJS
Our goals in this tutorial is simple:
- Demonstrate how to setup NextJS with Testing Library and Jest.
Getting started and installing dependencies
Start by creating a fresh NextJS application.
npx create-next-app testing-with-nextjs
Next, open up the created directory (testing-with-nextjs) in your favourite text editor. We see that create-next-app has given us an application with the following structure.
Now that we have our application setup, let’s install our dependencies. Run the following command to install
yarn add -D jest jest-dom @testing-library/react @testing-library/jest-dom @testing-library/dom babel-jest
If you aren’t familiar with these tools, it’s worth giving them a brief explanation.
- Jest will be our testing framework. We will use it to run our tests and to make assertions on our code.
- The @testing-library libraries allow us to render and test our React application.
- babel-jest is used to transform our code with babel.
Now that we have our dependencies, we can get started with our setup.
Start by creating a file called
setupTests.js in your project root. Fill the file with the following import.
Next, create a file called
.babelrc in the root directory. Add the following to the file.
Finally, create a file called
jest.config.js also in the root directory. Inside this file, copy and paste the following.
This file tells jest that we want to ignore files in our
node_modules directory, and also the
.next (this is where Next compiles our application) directory. We want jest to run our
We should also update our
package.json to add a test script.
Writing our first test
Now that we have our test environment setup, it’s time to write our first test. Create a file called
index.test.js file. Inside this file, we will test that when we render our
App, we can see the heading “Welcome to Next.JS”.
Important note: do not put your test inside of the
pages directory. If you do so, NextJS will consider this file to be a route of your application, and you will get an error like this when you try to build your app.
To avoid this error, just place your test in another folder. My preferred file structure while working with NextJS is to keep any business or application logic outside of the
pages directory. For the sake of this exercise, you could simply place
index.test.js inside a new folder called
Now we can run our test by running
We see that our test passes.
Be sure to check out the documentation for testing-library.
If you would like to see this project in action, check it out on Github.
And if you would like to learn more about how to test complex React projects, be sure to check out our previous article.
Testing a Full-Stack React Application
Testing user behaviour with Jest and react-testing-library
In this article, we test (from a user’s perspective) a basic CRUD application. If you’re someone who struggles with testing asynchronous code, we think it will help.