How To Test Next.js Apps With Testing Library & Jest

Mar 24, 2020 • Guide



This guide will show you how to configure testing-library & Jest to work with Next.js.

Setting Up Next.js App

For this guide we will use the basic 'create-next-app', which will automatically setup everything needed except testing.

I made a clone, in case future versions break the tests performed in this guide. We'll start by running the following commands:

  $ git clone
  $ cd nextjs-testing-library
  $ npm run dev

Now, when you visit localhost:3000, you'll see "Welcome to Next.js!"

Installing Testing Library & Jest

Like I mentioned 'create-next-app' doesn't come with built in testing. So first, let's install the necessary packages:

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

Create setupTests.js

Let's create a file in the root of the project called 'setupTests.js' and add the following to that file:

  import '@testing-library/jest-dom/extend-expect'
This will import necessary code from the jest-dom package when we run our tests.

Create jest.config.js

The next file we need to create will also go in the root of our project and will be called 'jest.config.js', with the following code:

  module.exports = {
    collectCoverageFrom: [
    setupFilesAfterEnv: ['<rootDir>/setupTests.js'],
    testPathIgnorePatterns: ['/node_modules/', '/.next/'],
    transform: {
      '^.+\.(js|jsx|ts|tsx)$': '<rootDir>/node_modules/babel-jest'
    transformIgnorePatterns: [
    moduleNameMapper: {
      '^.+\.module\.(css|sass|scss)$': 'identity-obj-proxy',
This is the configuration jest will use when we run our test script.

Create .babelrc

The final file that needs to be created in the root directory is '.babelrc', with the following:

    "presets": ["next/babel"]
Next.js requires us to have '.babelrc' once we start testing or using some external libraries.

Creating Our Tests

Our tests will reside in a folder that must be created and called '__tests__' in the root directory of the project.

In this folder you'll create a file called 'index.tests.js' and include the following code:

  import React from 'react'
  import { render } from '@testing-library/react'
  import Home from '../pages/index.js'
  test('renders deploy link', () => {
    const { getByText } = render(<Home />)
    const linkElement = getByText(
      /Instantly deploy your Next.js site to a public URL with ZEIT Now./
This is a basic test that will check if the text "Instantly deploy your Next.js site to a public URL with ZEIT Now" is present in the DOM.

Our project file structure should now look like this:

nextjs-testing-library-jest project-structure

Package.json Test Script

Now, we're going to edit the scripts block in the 'package.json', like so:

  "scripts": {
    "test": "jest",
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
We've added a script called "test" that will run "jest".

Running The Test

Now for the fun part. Run the following in your command line:

  npm run test

You should see successful output like so:

nextjs-testing-library-jest npm-run-test

Didn't get the same result? Stuck? Or want to discuss? Leave a message in the Disqus Thread or message me on Twitter.

Get in Touch