DEV Community

Cover image for How To Quickly Add Jest To Your Next.js App
Ash Connolly
Ash Connolly

Posted on

How To Quickly Add Jest To Your Next.js App

Pssst.. you might also like this guide on adding Cypress to your Next.js App. Combined with Jest, it's a great setup!

Adding Jest

Add the jest dependency:

  • yarn: yarn add jest --dev
  • npm: npm install jest --save-dev

Add a jest script to your package.json so that we can run jest against our test files:

"scripts": {
    "jest": "jest"
Enter fullscreen mode Exit fullscreen mode

Add a test file anywhere in your app. For now lets call it example.test.js :

const sum = (a, b) => a + b

describe('sum()', () => {
  it('should return 5 if given 2 and 3 ', () => {
    expect(sum(2, 3)).toBe(5)
Enter fullscreen mode Exit fullscreen mode

Now if we run yarn jest or npm run jest we'll see the test is found, it runs, and passes! βœ…

Jest with Cypress

If you're using Cypress, we need to add our own jest.config.js file to tell Cypress to ignore our cypress tests. Otherwise Jest will pick them up and try to run jest on the files and cause an error. This is because Jest is set up to run tests on files that end in spec.js or test.js and Cypress tests end in spec.js.

module.exports = {
  // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
  modulePathIgnorePatterns: ['./cypress'],
Enter fullscreen mode Exit fullscreen mode
  • You can also setup a jest config file using npx jest --init


And that's it! We have added Jest to our Next.js app! πŸŽ‰ πŸ˜ƒ

Now we can unit test all of our JS logic / helper functions! For more details on how to write tests, be sure to check the Jest Docs.

If you're interested in hearing more tips about React, Next.js, and JavaScript, feel free to follow me on twitter!πŸ˜ƒ

Epic cover photo by Ken Smith on Unsplash!

Top comments (0)