How To Quickly Add Jest To Your Next.js App

May 30, 2021 |4,502 views

#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"
}

"scripts": {
  "jest": "jest"
}

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)
  })
})

const sum = (a, b) => a + b
 
describe('sum()', () => {
  it('should return 5 if given 2 and 3 ', () => {
    expect(sum(2, 3)).toBe(5)
  })
})

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'],
}

module.exports = {
  // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
  modulePathIgnorePatterns: ['./cypress'],
}

• You can also setup a jest config file using npx jest --init

#Done!

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.