JestでReactのスナップショットテストするとexpect(tree).toMatchSnapshot()の行でエラーが発生する

背景

Reactアプリのレンダリングが正常であるかをテストする場合、Jestのスナップショット機能を使用する方法がある。

今回、業務で単体テストとしてスナップショット機能を使用したのだが、テストを実行すると「expect(tree).toMatchSnapshot()」の箇所に波線が引かれ、エラーメッセージが出力されたのでその原因と解決策をまとめた。

開発言語 (バージョン情報)

• React.js (17.0.2)
• Next.js (11.1.2)
• TypeScript (4.4.3)
• Jest (27.2.2)

試したこと

src/pages/Page1/index.tsxのテストファイルとして、「src/pages/Page1/index.spec.tsx」を作成する。

そして下記のコードを書く。

index.spec.tsx

import TestRenderer from 'react-test-renderer';
import Component1 from 'components/organisms/Component1';
import interfaceA from 'interfaces';

describe('Snapshots 1', () => {
 test('pattern 1'), () => {
  const sampleDatas: interfaceA[] = [
   {
    sampleId: '1',
    sampleName: 'Sample001',
    comment: 'test test',
   },
  ];
  const onClickPrepare = () = > {
   // 処理
  };
  const onClickApply = () = > {
   // 処理
  };
  const tree = TestRenderer.create(
   <Component1
    datas={sampleDatas}
    onClickPrepare={onClickPrepare}
    onClickApply={onClickApply}
   />,
  ).toJSON();

  expect(tree).toMatchSnapshot();
 )};
})

ターミナルにてコマンドを実行する。

jest pages/Page1/index.spec.tsx

下記メッセージのエラーが出力される。

1 snapshots obsolete from 1 test suite. To remove them all, run `npm test -- -u`.

原因

直前に別のコンポーネントのスナップショットを撮ったにも関わらず、今回「-u」オプションで実行しなかったため。

「-u」オプションはスナップショットを強制的に更新するオプションで、別コンポーネントのスナップショットを撮るときは一度「-u」オプションで実行する必要がある。

解決策

スナップショットを撮る対象のコンポーネントを切り替えた直後など、一回目の実行時は下記コマンドで実行する。

jest -u pages/Page1/index.spec.tsx

まとめ

スナップショットでテストするとき、初回のみ「-u」オプションでコマンド実行する。