Next.jsを楽にテスト(スナップショットテスト)

はじめに

コードテストの保守が大変だと思ったことはありませんか。
Next.jsとJestでスナップショットテストを行うことで、表示に関わるDOMを直接テストでき、尚且つページの更新などによるテストコードの変更もほとんどない快適なテストをしませんか。

方法

Next.jsとJest、jest-domを使用してスナップショットテストを行います。
スナップショットテストは仮想的にDOMを操作してテストを行います。
あらかじめ記録したDOMとテスト時のDOMが一致するかどうかを確かめるだけでテストをすることができるので、Reactのコードが更新されても、記録したDOMを更新するだけで、テストのコードを更新せずにテストをすることができます。

前提

• Next.js 13
• TypeScript
• Jest

コード

まずはテストに使用するパッケージをインストールします。

> npm install -D @testing-library/dom @testing-library/jest-dom @testing-library/react @testing-library/user-event @types/jest @types/react-test-renderer jest jest-environment-jsdom

src/__test__ディレクトリを作成し、中にテストのコードを配置します。

import { render } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";

describe("Rendering", () => {
  it("Test", () => {
    const { asFragment } = render(<div>Hello, world!</div>);
    expect(asFragment()).toMatchSnapshot();
  });
});

スナップショットテストはjsでDOMを仮想的に生成しそれをスナップショットとして保存します。
render()では仮想的なDOMをレンダリングすることができます。
それをasFragmentとして変数にもち、jestのtoMatchSnapshot()で以前に保存したスナップショットとasFragmentのDOMを比較して一致したらテストが通ります。
スナップショットが保存されていなかった場合、自動でスナップショットを保存してテストが通過します。
スナップショットはテストのコードと同じ階層の__snapshots__ディレクトリの中に保存されます。

スナップショットは次のように保存されています。
私の環境で上記のコードを実行した時のスナップショットです。

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Rendering Test 1`] = `
<DocumentFragment>
  <div>
    Hello, world!
  </div>
</DocumentFragment>
`;

このようにDOMの状態がそのまま保存されています。