How to configure Jest on a Next.js project

ericdouglas profile image Eric Douglas ・1 min read

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

2. Add the test script to run yor tests

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

"test": "jest --watch"

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

4. Final step: .babelrc

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

  "presets": ["next/babel"]

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! πŸ‘‹

Posted on by:

ericdouglas profile

Eric Douglas


A lover of wisdom πŸ§™πŸ½β€β™‚οΈ in a journey to master & teach distributed systems engineering & scalable software development. ✦ Erlang ✦ Elixir ✦ JS ✦ React ✦ FP


markdown guide