storyshotsでのスナップショットテスト #JavaScript

スナップショットテスト

現在の画面のスナップショット（キャプチャみたいなもの）を保存しておいて、テストの時にそのスナップショットと今の画面と比較して変更点を出力してくれる。
変更内容を確認して意図せぬ変更に気づくことができる。
正しい変更かそうでないかは自分で確認にすること。

流れ

スナップショットは導入した後の初回のテスト時に自動で生成される。
なので初回は比較対象がないので、必ずパスする。
スナップショットが生成した次回以降のテストは比較結果が出る。
変更点が問題なく、新しくスナップショットを取りたいと思ったら、スナップショットのファイルを削除して、再度テストを実施して生成させる。

導入

storybookの導入

スナップショットのテストの方法はいくつかあると思うが、今回はstorybookを利用したテストの方法を記載する。
storybookの初期化を実行する。
下を実行することで、storybookのパッケージの追加とstorybookの設定ファイルを生成してくれる。

npx -p @storybook/cli sb init

./src/storiesがサンプルファイルとして生成されるので、不必要なら削除する。
また、typescriptを使っているなら、./storybook/main.jsの設定ファイルを変更する。

module.exports = {
  stories: ['../src/**/*.stories.tsx],
  addons: [
    '@storybook/preset-create-react-app',
    '@storybook/addon-actions',
    '@storybook/addon-links',
  ],
};

Hello world!!と表示するだけのHelloコンポーネントがあるとする。
Hello.stories.tsxを作成してstorybookに登録する。

// src/Hello.tsx

import React from 'react';

const Hello = () => <div>Hello world!!</div>;

export default Hello;

// src/Hello.stories.tsx

import React from 'react';

import Hello from './Hello';

export default {
  component: Hello,
  title: 'Hello',
  excludeStories: /.*Data$/,
};

export const Default = () => <Hello />;

yarn storybookを実行するとstorybookの画面で確認することができる。

storyshotsの導入

スナップショットの実行するパッケージを追加する。

yarn add -D @storybook/addon-storyshots react-test-renderer

スナップショットを生成するためのファイルを作成する。

// src/storyshots.test.js

import initStoryshots from '@storybook/addon-storyshots';
initStoryshots();

yarn testを実行したら、./src/__snapshots__/storyshots.test.js.snapというファイルが生成されたはず。
中身は以下ようにHelloコンポーネントで表示する内容が記載されている。

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

exports[`Storyshots Hello Default 1`] = `
<div>
  Hello world!!
</div>
`;

testはこのスナップショットのファイルがない場合はスナップショットの生成、ある場合は比較する。
生成の場合はテストはパスになる。
このあとHelloコンポーネントを変更して、yarn testを実行したらスナップショットのファイルと比較するのでテストは通らない。

コンポーネントを変更して、再度スナップショットを取りたい場合は__snapshots__のディレクトリごと削除する。