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!

How To Quickly Add Cypress To Your Next.js App (deprecated)

Ash Connolly ・ May 30 '21

#nextjs #javascript #beginners #react

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

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

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

• 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.

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!