[Next.js] Jest + Typescript + Next.js

개요

• 설치 및 적용

---

Get Started

install)

pnpm create next-app

 

add dependencies)

pnpm add -D @testing-library/jest-dom @testing-library/react @testing-library/user-event jest jest-environment-jsdom ts-jest

 

script)

// package.json

"scripts": {
    ...
    "test": "jest",
    "test:watch": "jest --watchAll"
  },

 

jset config)

// jest.config.js
const nextJest = require('next/jest')

const createJestConfig = nextJest({
  dir: './',
})

const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  testEnvironment: 'jest-environment-jsdom',
  preset: 'ts-jest',
}

module.exports = createJestConfig(customJestConfig)

// jset.setup.js
import '@testing-library/jest-dom/extend-expect'

 

 

eslint setting)

pnpm add -D eslint-plugin-jest-dom eslint-plugin-testing-library

 

 

pnpm add -D eslint-plugin-jest-dom eslint-plugin-testing-library

 

 

 

참고자료 :  Docs , OpenSource , Youtube ,