DEV Community

Cover image for Setup Next.js with Typescript , Jest and React Testing Library
Maciek Grzybek
Maciek Grzybek

Posted on • Updated on

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

#react #typescript #testing #nextjs

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
Enter fullscreen mode Exit fullscreen mode
  • install typescript as well as react and node types 
npm install typescript @types/react @types/node -D
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • create config files for typescript and babel 
touch tsconfig.json
touch .babelrc
Enter fullscreen mode Exit fullscreen mode
  • add to the babel config file 
{
  "presets": ["next/babel"]
}
Enter fullscreen mode Exit fullscreen mode
  • 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/'],
};
Enter fullscreen mode Exit fullscreen mode 
// jest.setup.ts
import '@testing-library/jest-dom';
Enter fullscreen mode Exit fullscreen mode
  • start the app so next can configure typescript 
npm run dev
Enter fullscreen mode Exit fullscreen mode

BONUS

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

npm i identity-obj-proxy -D
Enter fullscreen mode Exit fullscreen mode
  • 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',
  },
};
Enter fullscreen mode Exit fullscreen mode

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

Top comments (8)

Collapse
 
kastinpl profile image
KASTIN.pl •

it's good to mention also one more thing: if you use a tsconfig.json -> compilerOptions.baseUrl config for absolute paths feature, you have to add:

moduleDirectories: ['node_modules', 'src']
Enter fullscreen mode Exit fullscreen mode

to your jest.config.js

source: stackoverflow.com/a/51174924/3999031

Collapse
 
spences10 profile image
Scott Spence •

Brillsies!!!

This helped me, thank you 🙏

Collapse
 
maciekgrzybek profile image
Maciek Grzybek •

Glad I could help :)

Collapse
 
matthew_inamdar profile image
Matt Inamdar •

Exactly what I was looking for. Amazing!

Collapse
 
arthur322 profile image
Arthur Conrado de Lima •

Thank you a lot! Awesome! đź‘Źđź‘Źđź‘Ź

Collapse
 
maciekgrzybek profile image
Maciek Grzybek •

Glad I could help :)

Collapse
 
dhaiwat10 profile image
Dhaiwat Pandya •

Thank you so much!

Collapse
 
minmaxdata profile image
Karen McAdams •

looking for a solution that uses SWC and not babel

Read next

gcascio profile image

Dynamic breadcrumbs in Next.js using the app router

gcascio -

nikl profile image

12 Security Tips for Golang Apps - validation, sanitization, auth, CSRF attacks, hashing ++

Nik L. -

railsstudent profile image

Text translation using Google Cloud Translation API in a NestJS application

Connie Leung -

samuellubliner profile image

Optimizing Fonts and Images (Next.js)

Samuel Lubliner -