Next.js is a popular React framework for server-rendered applications. Jest is a popular framework for writing unit tests. So I was quite surprised how difficult it was finding a solution on the web for how to prepare Jest with my Next.js application. Turns out it’s fairly simple to prepare. Let’s look at the configuration files you need to add.
These are the dev dependencies you will need for the setup:
If you haven’t already, go ahead and add these files to the root of your app:
.babelrcjest.setup.jsjest.config.js
Inside of the .babelrc file, add "next/babel" to the presets:
Inside of your jest.setup.js file, add the Enzyme Adapter configuration:
And lastly, inside of jest.config.js, add:
That’s it! Jest should now be configured to work with Next.js.
If you are running ESLint, you can also add a quick Jest configuration to your eslintrc.json file:
Hope this helps!
