Next.jsにJestを導入する

# 概要
Next.jsにjestを導入しようとしたところ、詰まったので投稿します。
Reactと導入の仕方が若干違うので手間取りました。
[reactに導入したときの記録](https://qiita.com/RYA234/items/5c2604d54c7c1c3551cf)

# 開発環境
OS:windows10
IDE:VSCode

├── @babel/core@7.20.7
├── @storybook/addon-actions@6.5.15
├── @storybook/addon-essentials@6.5.15
├── @storybook/addon-interactions@6.5.15
├── @storybook/addon-links@6.5.15
├── @storybook/addon-postcss@2.0.0
├── @storybook/builder-webpack4@6.5.15
├── @storybook/manager-webpack4@6.5.15
├── @storybook/react@6.5.15
├── @storybook/testing-library@0.0.13
├── @styled-jsx/plugin-sass@3.0.0
├── @styled/storybook-addon-jsx@7.4.2
├── @types/node@18.11.15
├── @types/react-dom@18.0.9
├── @types/react@18.0.26
├── axios@1.2.1
├── babel-loader@8.3.0
├── babel-plugin-react-require@3.1.3
├── eslint-config-next@13.0.6
├── eslint-plugin-storybook@0.6.8
├── eslint@8.29.0
├── next-auth@4.18.7
├── next@13.0.1
├── react-bootstrap@2.7.0
├── react-dom@18.2.0
├── react@18.2.0
├── sass@1.57.1
├── styled-components@5.3.6
├── styled-jsx@5.1.1
└── typescript@4.9.4

# 実装
# コマンドを実行
```
npm install --save-dev jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom
```

# 公式の導入済みリポジトリと比較してファイルを追加する。
上のコマンドだけでは動きませんでした。
[公式のgithub](https://github.com/vercel/next.js/tree/canary/examples/with-jest )を参考にします。
追加もしくは編集するファイルは以下の様になっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/22acac46-4087-d7b9-b80c-8a59ee7bd1f8.png)

next.jsの場合はconfigファイルがないと動きません。
```jest.config.js
const nextJest = require('next/jest')

const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: './',
})

// Add any custom config to be passed to Jest
/** @type {import('jest').Config} */
const customJestConfig = {
  // Add more setup options before each test is run
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
  moduleDirectories: ['node_modules', '<rootDir>/'],
  testEnvironment: 'jest-environment-jsdom',
}

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig)

```


jest.setup.jsはなくても動作する模様。（用途はテスト用データベースの設定とかに使うとかか？）
```jest.setup.js

// Optional: configure or set up a testing framework before each test.
// If you delete this file, remove `setupFilesAfterEnv` from `jest.config.js`

// Used for __tests__/testing-library.js
// Learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom/extend-expect'

```



```diff_json:package.json
{
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
+    "test": "jest --watch",
+    "test:ci": "jest --ci"
  },
  "dependencies": {
    "next": "latest",
    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
  },
  "devDependencies": {
+    "@testing-library/jest-dom": "5.16.4",
+    "@testing-library/react": "13.2.0",
+    "@testing-library/user-event": "14.2.0",
    "@types/react": "18.0.9",
+    "@types/testing-library__jest-dom": "5.14.5",
+    "jest": "28.1.0",
+    "jest-environment-jsdom": "28.1.0",
    "typescript": "4.6.4"
  }
}

```



# テストコードを動かす

簡単なテストコードを作成します。
２つの値を足し算するコードですね。
```__tests__/foo.ts

export const sum
  = (...a: number[]) =>
    a.reduce((acc, val) => acc + val, 0);
```


```__tests__/foo.test.ts
import { sum } from '../___tests___/foo';

test('basic', () => {
  expect(sum(1,4)).toBe(5);
});

test('basic again', () => {
  expect(sum(1, 2)).toBe(3);
});

test('basic  Pattern', () => {
    expect(sum(100, 2)).toBe(102);
  }
);
```

npm run test を実行したテスト結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/b46a3e04-3fce-d108-2570-490587973674.png)




# 参考
公式ドキュメント

https://nextjs.org/docs/testing

公式github

https://github.com/vercel/next.js/tree/canary/examples/with-jest