投稿日:2022/10/10 最終更新日:2022/10/10
Next.js×TypeScriptにJestを実行する方法（準備編）
設定方法
1. まずは必要なパッケージをインストール（npm or yarn）
npm install --save-dev jest @testing-library/react @testing-library/jest-dom
# or
yarn add -D jest @testing-library/react @testing-library/jest-dom念のためになりますが、もしかしたら以下も必要になるかもしれないのでインストールしておくといいです。
npm install --save-dev @testing-library/user-event2. jest.config.jsファイルを作成する
一番親フォルダー（例：create-next-appで作成したフォルダーの直下）の直下で作成します。
内容はコピペのままでOKです。
const nextJest = require('next/jest')
const createJestConfig = nextJest({
dir: './',
})
// Add any custom config to be passed to Jest
const customJestConfig = {
// setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
moduleDirectories: ['node_modules', '<rootDir>/'],
testEnvironment: 'jest-environment-jsdom',
}
module.exports = createJestConfig(customJestConfig)3. package.jsonのscriptsにコードを追加する
追加することでテスト際はコンソールへnpm testと打てば実行出来るようになります。
"scripts": {
...
"test": "jest --watch"
...
}4. componentsもしくはpartsフォルダに__test__フォルダを作成する
なんでも良いようですが、慣習で__test__とするようですので基本的にはこれで作りましょう。
5. __test__フォルダーにテストファイルを作成する
テストファイルは○○.test.jsという形式で作成します。（例：HeaderコンポーネントであればHeader.test.jsにするなど）
また、以下のコードはJestの関数を使用する際に必要になりますので一番上に追加してください。
import '@testing-library/jest-dom';これで下準備は完了になります。
実際にテストコードを書いて実行する方法は別の記事で紹介したいと思います。
