Setting Up Testing Library with NextJS

Getting setup with Jest and React Testing Library

Malcolm Laing
Jul 11 · 3 min read
Image for post
Image for post
Photo by Sharon Pittaway on Unsplash

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.

Image for post
Image for post
Searching for “testing” in the NextJS documentation

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 , 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.

pages
api
hello.js
index.js

Now that we have our application setup, let’s install our dependencies. Run the following command to install , , , and .

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.

Configuring Jest

Now that we have our dependencies, we can get started with our setup.

Start by creating a file called in your project root. Fill the file with the following import.

import "@testing-library/jest-dom/extend-expect";

Next, create a file called in the root directory. Add the following to the file.

{
"presets": ["next/babel"]
}

Finally, create a file called also in the root directory. Inside this file, copy and paste the following.

jest.config.js

This file tells jest that we want to ignore files in our directory, and also the (this is where Next compiles our application) directory. We want jest to run our file before running our tests, and we want it to transform our JavaScript using .

We should also update our to add a test script.

"test": "jest"

Writing our first test

Now that we have our test environment setup, it’s time to write our first test. Create a file called file. Inside this file, we will test that when we render our , we can see the heading “Welcome to Next.JS”.

Important note: do not put your test inside of the 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 directory. For the sake of this exercise, you could simply place inside a new folder called .

Now we can run our test by running .

We see that our test passes.

Additional resources

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.

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.

Frontend Digest

Anything and everything frontend. JavaScript, CSS and HTML.

Sign up for Highlights

By Frontend Digest

The latest and greatest in frontend development Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Malcolm Laing

Written by

JavaScript Consultant. Senior React developer. Still makes silly mistakes daily.

Frontend Digest

Anything and everything frontend. JavaScript, CSS and HTML.

Malcolm Laing

Written by

JavaScript Consultant. Senior React developer. Still makes silly mistakes daily.

Frontend Digest

Anything and everything frontend. JavaScript, CSS and HTML.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store