Setup Next.js with Typescript , Jest and React Testing Library

Why?

Next.js is a super cool React framework, that gives you an amazing developer experience. In this episode, I'll show you how to set it up with Typescript, Jest and React Testing Library.

Setup

To set up the project we'll need to follow these steps:

• to create Next app, from your terminal run

npx create-next-app

• install typescript as well as react and node types

npm install typescript @types/react @types/node -D

• install jest, react testing library, babel-jest, @testing-library/jest-dom and types for jest

npm i jest @testing-library/react @types/jest babel-jest @testing-library/jest-dom @testing-library/user-event @testing-library/dom -D

• create config files for typescript and babel

touch tsconfig.json
touch .babelrc

• add to the babel config file

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

• create jest.config.js and jest.setup.ts files

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

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

• start the app so next can configure typescript

npm run dev

BONUS

If you're going to use CSS modules, make sure you also include these steps:

• install identity-obj-proxy package

npm i identity-obj-proxy -D

• update jest.config.js file to look like this

module.exports = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
  moduleNameMapper: {
    '\\.(scss|sass|css)$': 'identity-obj-proxy',
  },
};

Now we are good to go, you can start changing your component from .js to .tsx and building your awesome app.