Next.jsにおけるテスト

以下解説

Learn how to set up Next.js with three commonly used testing tools: Cypress, Jest, and React Testing Library.

とあるように、公式docからは以下を紹介してる

ドキュメントには書いてないっぽい

ページ内をtypescriptで検索してもヒットしないため

が、後に説明するようにjest.config.jsを読むと分かる

exampleにはwith-typescript-eslint-jestがある

同様にbabel-jest使うのがいい

上のように公式のexampleがそうだし

以下に説明するように、babel-jestでjestの設定でnext/babelを読ませる

公式docからのjest.config.js

code:js

// jest.config.js

module.exports = {

collectCoverageFrom: [

'**/*.{js,jsx,ts,tsx}',

'!**/*.d.ts',

'!**/node_modules/**',

],

moduleNameMapper: {

/* Handle CSS imports (with CSS modules)

'^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',

// Handle CSS imports (without CSS modules)

'^.+\\.(css|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',

/* Handle image imports

'^.+\\.(jpg|jpeg|png|gif|webp|svg)$': '<rootDir>/__mocks__/fileMock.js',

},

testEnvironment: 'jsdom',

transform: {

/* Use babel-jest to transpile tests with the next/babel preset

},

transformIgnorePatterns: [

'/node_modules/',

'^.+\\.module\\.(css|sass|scss)$',

],

}