This content originally appeared on DEV Community and was authored by Ash Connolly
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"
}
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!
This content originally appeared on DEV Community and was authored by Ash Connolly
Ash Connolly | Sciencx (2021-05-30T18:22:05+00:00) How To Quickly Add Jest To Your Next.js App. Retrieved from https://www.scien.cx/2021/05/30/how-to-quickly-add-jest-to-your-next-js-app/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.