This article's content
Testing with Jest in NextJS for TypeScript
npm install typescript @types/react @types/node -D
npm i jest @testing-library/react @types/jest babel-jest @testing-library/jest-dom @testing-library/user-event @testing-library/dom -D

Add to package.json:

"test": "jest --watch"

Add to .eslintrc.json:

{
    "env": {
        "jest": true
    }
}

Add to .babelrc:

{
  "presets": ["next/babel"]
}

Create jest.config.js

// jest.config.js
module.exports = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
};

Create jest.setup.ts

// jest.setup.ts
import '@testing-library/jest-dom';

About Author

Mathias Bothe To my job profile

I am Mathias, born 40 years ago in Heidelberg, Germany. Today I am living in Munich and Stockholm. I am a passionate IT freelancer with more than 16 years experience in programming, especially in developing web based applications for companies that range from small startups to the big players out there. I am founder of bosy.com, creator of the security service platform BosyProtect© and initiator of several other software projects.