StoryShotsを導入する

わりと導入辛くて色々やったんで、備忘録として残します。

StoryShots とは

StoryShotsは Storybook の Story を書けば Jest の Snapshot テストも一緒に行ってくれるやつです。

売り文句だけ聞くと最&高ですね。

導入手順

導入したプロジェクトは以下のような感じです。

  1. TypeScript 導入してある
  2. Jest 導入してある
  3. Storybook 導入してある
  4. Babel はなし

まずは、パッケージをインストールします。

1
$ npm i -D @storybook/addon-storyshots

Jest のテスト対象ディレクトリの下に、storyshots.test.tsと言う名前で以下のファイルを設置します。

1
2
3
import initStoryshots from '@storybook/addon-storyshots';
initStoryshots({ /* configuration options */ });

Jest の設定ファイルでtestMatchの設定は以下のような感じにしてたら、src/__tests__辺りにおいとけばいいです。

1
2
3
module.exports = {
testMatch: ['**/__tests__/*.+(ts|tsx|js)'],
};

公式ドキュメント曰くこれで設定完了ですが、Jest 実行したら以下のエラー吐いてコケます。

1
2
3
4
5
6
Jest encountered an unexpected token
/* 中略 */
Details:
/Users/k4h4shi/src/github.com/payper-src/hikouki/.storybook/config.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { configure } from '@storybook/react';

Jest は storybook の設定ファイルを見に行くんですが、babel とか入れてないので、ES6 のimportとかは使えないよって事ですね。

なので import ではなく、require を使うように修正します。

もう一度 Jest 実行すると、今度は以下のエラー吐いてコケます。

1
2
3
4
5
6
7
8
9
10
11
● Test suite failed to run
TypeError: require.context is not a function
3 | require('../index.css');
4 |
> 5 | const req = require.context('../src/components', true, /__stories__/);
| ^
6 | function loadStories() {
7 | req.keys().forEach(filename => req(filename));
8 | }

require.context が  は関数じゃないよって言ってます。
require.contextは webpack の機能で、Jest 経由で Storybook の設定ファイルを見に言ってるので、これは使えないようです。

このイシューで、babel-plugin-require-context-hookと言う同等の機能を提供する babel プラグインがある事がわかったので、babel とそいつを導入します。

1
$ npm i -D babel-jest babel-core regenerator-runtime babel-plugin-require-context-hook

以下のような.babelrc を追加します。

1
2
3
4
5
6
7
{
"env": {
"test": {
"plugins": ["require-context-hook"]
}
}
}

Jest の初期設定ファイルにて、以下を実行します。

1
require('babel-plugin-require-context-hook/register')();

Jest の設定ファイルで、jsファイルはbabel-jestでトランスパイルするようにします。

1
2
3
4
transform: {
'^.+\\.(ts|tsx)$': 'ts-jest',
'^.+\\.(js)$': 'babel-jest',
},

これで Jest を実行すると、StoryShots によるテストが走るはずです。

お疲れ様でした。