DEV Community

Eric Douglas
Eric Douglas

Posted on

How to configure Jest on a Next.js project

#react #jest #nextjs

You just need to follow few steps to have Jest enabled in your Next.js application.

Let's see how to do this!

1. Install the dependencies 

npm i -D babel-jest jest
Enter fullscreen mode Exit fullscreen mode

2. Add the test script to run yor tests

Inside your package.json file, add this line in the scripts section:

"test": "jest --watch"
Enter fullscreen mode Exit fullscreen mode

Now, all you need to do is (after we finish the setup), type npm test on you terminal.

3. Setup .eslintrc.json

If you are using ESLint, you will need to tell it to stop warning you about Jest functions.

Create a file called .eslintrc.json if you don't have one, and add the following code in the env section:

{
    "env": {
        "jest": true
    }
}
Enter fullscreen mode Exit fullscreen mode

4. Final step: .babelrc

Just create a file called .babelrc and put this inside of it:

{
  "presets": ["next/babel"]
}
Enter fullscreen mode Exit fullscreen mode

And that's it! If you need configure some thing particularly related to your project (like ignore certain folder), you can take a look at this file and this folder.

Bye! đź‘‹

Top comments (3)

Collapse
 
jbranchaud profile image
Josh Branchaud •

Without Step 4, I got a pretty obscure error about needing to add @babel/plugin-transform-react-jsx to the plugins section of my Babel config in order to get support for the experimental syntax that is 'jsx'.

Adding .babelrc with the specified preset fixed it. Thanks for documenting these steps!

Collapse
 
philval profile image
Philip Valentino •

Thank you Eric! This a) works b) was horrible trying to find a solution. Is the Next.js team aware I wonder ?

Collapse
 
bengrunfeld profile image
Ben Grunfeld •

I had to add the following to my .babelrc.

"env": {
    "test": {
        "presets": ["next/babel"]
    }
}
Enter fullscreen mode Exit fullscreen mode

Read next

arnab2001 profile image

React Design Patterns: Best Practices for Scalable Applications

Arnab Chatterjee -

codebucks profile image

Top 10 Best Open Source Next.js Projects to Learn From

CodeBucks -

erikvandewiel profile image

Static text reinvented: a developer’s solution to updates without a CMS

Erik van de Wiel -

0x3d_site profile image

Programming Tips and Tricks Across Elixir, Clojure, and Nim

0x3d Site -