Facebook社がOSSとして開発を進めているJavaScript用テスティングフレームワーク

Jest

Amazon.comにより提供されているクラウドコンピューティングサービス

コンピュータプログラムで問題を解決するための手順や計算方法のこと

Algorithm

継続的インテグレーション＆継続的デリバリーの略で、アプリケーションの構築、テスト、および展開の自動化を指す

CI/CD

コンテナ仮想化を用いてアプリケーションを開発・配置・実行するためのDocker​社製オープンソースソフトウェア

Docker

GitHub社によって運営されているソースコードの変更履歴を管理するホスティングサービス

GitHub

静的なHTMLをベースに、JavaScriptを用いたAPIを通じて動的なコンテンツを扱うWebサービスのアーキテクチャ

Jamstack

MVCモデルでWebアプリケーションを開発できるオープンソースWebアプリケーションフレームワーク

Laravel

GoogleのMaterialデザインをベースに開発された、ウェブ開発をより高速かつ簡単にするReactコンポーネント

Material-UI

Oracle社が中心となって開発しているオープンソースのリレーショナルデータベース管理システム

MySQL

Vercel社がOSSとして開発を進めているReactベースのフロントエンドフレームワーク

Next.js

The PHP Groupによってコミュニティベースで開発されているオープンソースの汎用プログラミング言語。

Facebook社とコミュニティによって開発されているUI構築のためのJavaScriptライブラリ

React

マイクロソフトが開発・販売しているGUIを採用したオペレーティングシステムの製品群

Windows

Jest - Breathnote

Jestは、next/routerをテストできません。というわけでモックを作って対応するのですが、素直にモック関数を作るだけでは動いてくれなかったので、備忘録をアウトプットしておきます。

- [How to mock useRouter?](https://github.com/vercel/next.js/issues/7479)

## モックの作り方

<div className="codeblock-filename">テスト対象のコンポーネント</div>

```tsx
import { useRouter } from 'next/router'

const Example: NextPage = () => {
  const router = useRouter()
  const currentUser = useRecoilValue(currentUserState)

  useEffect(() => {
    currentUser === null && router.push('/login')
  }, [currentUser])

  return (
    <>
      {currentUser ? <Components /> : <Spinner />}
    </>
  )
}

export default Example
```

<div className="codeblock-filename">テストファイル</div>

```tsx
import { useRouter } from 'next/router'
import Example from 'components/Example'

jest.mock('next/router', () => ({ useRouter: jest.fn() })) // モック関数を作成

describe(`*****`, () => {
  afterEach(cleanup)

  test('ログインしていないユーザー', async () => {
    const mockRouter = {
      push: jest.fn() // 今回はrouter.pushを利用します
    }

    render(
      <RecoilRoot initializeState={loggedInInit}>
        <Example />
      </RecoilRoot>
    )

    // ログインページへリダイレクトしているか
    expect(mockRouter.push).toHaveBeenCalledWith('/login')
  })
})
```

Next.jsアプリをJestでテストする際、next/routerのモック化に手間取ったので、備忘録を残しておきます。

Jestでnext/routerをモック化

Material-UIは、コンポーネントに一意の`id`や`class`、`aria-**`属性を自動で付与しますが、これらの採番には`Math.random`が使われているようで、生成されるコードには、毎回差分が発生します。

上記の仕様は、スナップショットテストも例外でないため、テスト結果に影響を及ぼします。

<div className="codeblock-filename">テスト結果例</div>

```shell
    <button
-     aria-controls="mui-31907"
+     aria-controls="mui-25430"
      aria-haspopup="true"
      aria-label="Menu"
      class="MuiButtonBase-root MuiIconButton-root"
-     id="mui-56827"
+     id="mui-85534"
      tabindex="0"
      title="Menu"
      type="button"
    >
```

発生する差分が`class`属性だけであれば、[こちらの方法](https://lightbulbcat.hatenablog.com/entry/2019/08/15/032839)で対処できますが、今回は、`id`属性と`aria-controls`属性が対象だったため、別のアプローチで解決する必要がありました。

- [[TablePagination] Snapshot test issue](https://github.com/mui-org/material-ui/issues/21293#issuecomment-654921524)

## 対処法

`render`の結果をDOM Stringに変換し、`replace`メソッドで対象の属性を排除します。

<div className="codeblock-filename">Example.test.tsx</div>

```tsx
describe(`***`, () => {
  afterEach(cleanup)

  test('スナップショット', () => {
    const { container } = render(<DataGrid />)

    // https://github.com/mui-org/material-ui/issues/21293#issuecomment-654921524
    const tree = container.innerHTML.replace(/id="mui-[0-9]*"/g, '').replace(/aria-controls="(mui-[0-9]* *)*"/g, '')

    expect(tree).toMatchSnapshot()
  })
})
```

注意点として、スナップショットの結果を1行の文字列で返すようになるため、`asFragment`よりもテスト結果が確認しづらくなります。

## 所感

本件では、ローカルの他に、GitHub Actionsでもテストを実施しており、`jest -u`で強引に更新したくなかったため、今回の措置を行いました。

テストの実施がローカルだけであれば、必要ない措置かもしれません。

React Testing LibraryとJestを用いて、Material-UIコンポーネントをテストしていたのですが、スナップショットテストを実施するたびにコンポーネントの属性値が変動してしまったので、これを解消します。

React Testing Libraryのスナップショットテストで、Material-UIの属性値に差分が出る

Next.jsは、Create React Appのように標準のテスト環境を提供していないため、開発者自身がテスト環境を用意する必要があります。

私は、JestとReact Testing Libraryを使ってこのブログをテストしていますが、環境変数を利用しているコンポーネントをテストする際に、Jestが環境変数をうまく読み込んでくれませんでした。

調べてみると、いくつか対処法が見つかったので、採用した方法とその他諸々をアウトプットしておきます。

- [Can't access ENV vars defined in .env.test](https://github.com/vercel/next.js/discussions/16270)
- [Misleading documentation: variables in .env and .env.test are not being loaded in test environment](hhttps://github.com/vercel/next.js/issues/17903)

## 最善策

<div className="codeblock-filename">setupEnv.ts</div>

```ts
import { loadEnvConfig } from '@next/env'

export default async (): Promise<void> => {
  loadEnvConfig(process.env.PWD || process.cwd())
}
```

<div className="codeblock-filename">jest.config.js</div>

```js
module.exports = {
  globalSetup: '<rootDir>/setupEnv.ts',
}
```

テスト実行前に`@next/env`の`loadEnvConfig()`で環境変数ファイルを読み込みます。

`loadEnvConfig()`の引数は`process.env.PWD`だけでも動きますが、Windows環境では`process.env.PWD`が`undefined`を返す可能性があるため、`process.cwd()`も追加しています。

## 他の対処法

上記の方法が最善ですが、残りの対処法も紹介しておきます。

### 1. Next.jsのインスタンスを生成する

<div className="codeblock-filename">jest.setup.ts</div>

```ts
import next from 'next'
next({})
```

<div className="codeblock-filename">jest.config.js</div>

```js
module.exports = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
}
```

テストの前にNext.jsをインスタンス化してしまい、Next.js環境下でテストを実施する方法です。

この方法の良いところは、環境変数だけでなくfetch関数なども利用可能になる点でしょう。

ただ、インスタンスの作成にはビルドした`.next`フォルダが必要となります。GitHub Actionsなどを用いてテストをCIで回す場合、毎回`next build`が必要になります。

あと単純にテストが重くなります。

### 2. テスト用にdotenvを別途導入する

<div className="codeblock-filename">shell</div>

```shell
yarn add --dev dotenv
```

<div className="codeblock-filename">jest.setup.ts</div>

```ts
import dotenv from "dotenv";
dotenv.config({ path: ".env.local" });
```

<div className="codeblock-filename">jest.config.js</div>

```js
module.exports = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
}
```

上で述べた欠点を改良した原始的な対処法です。

ただ、せっかくNext.jsがビルトインサポートしているdotenvを、テストのためだけに再インストールするのは気が乗りませんでした。

Next.js × Jestのテストにおいて、デフォルトでは環境変数を読み込めません。本記事では、テストの実行前に処理を挟むことにより、環境変数を読み込む方法を紹介しています。

Jest

Jestでnext/routerをモック化

React Testing Libraryのスナップショットテストで、Material-UIの属性値に差分が出る

Jestを用いたNext.jsのテストで環境変数を利用する