Storybookことはじめ（Reactテスト編）
https://gyazo.com/693c223891831c18abe6d233e428cad0
スナップショットテスト
スナップショットファイルを作成し、以後そのファイルと実際のUIコンポーネントのレンダリング結果とを比較して、問題ないかどうかを防ぐためのテスト。
最初にやる
shell.icon npm i -D jest-cli jest-babel-preprocessor
jest-babel-preprocessorはReact.jsへのpathだった場合はMockしないように設定するために必要。 ! JestはDefaultでCommonJS Styleのrequireを全てMockに置き換える !
package.json で以下追加されているか確認。
code:package.json
"jest": {
"scriptPreprocessor": "<rootDir>/node_modules/jest-babel-preprocessor/preprocessor.js",
"unmockedModulePathPatterns": [
"<rootDir>/node_modules/react"
]
}
StoryShots
shell.icon npm i -D @storybook/addon-storyshots
shell.icon npm i -S react-test-renderer
@storybook/addon-storyshots にて必要。
package.json
test箇所を以下に書き換える。
code:package.json
"scripts": {
"test": "jest",
"storybook": "start-storybook -p 9001 -c .storybook"
},
Config file
Jestの初期ディレクトリが __test__ になっているのでディレクトリを作成後以下を作成＆設置。
code:__test__/Storyshots.test.js
import initStoryshots from '@storybook/addon-storyshots';
initStoryshots();
Options設定などは以下より参照。
Run
shell.icon npm test
code:zsh
storybooks@1.0.0 test /xxxxx/xxxxxx/xxxxx/my-storybook-project
jest
● Deprecation Warning:
Option "scriptPreprocessor" was replaced by "transform", which support multiple preprocessors.
Jest now treats your current configuration as:
{
"transform": {".*": "<rootDir>/node_modules/jest-babel-preprocessor/preprocessor.js"}
}
Please update your configuration.
Configuration Documentation:
PASS __test__/Storyshots.test.js (6.958s)
Storyshots
Button
✓ with text (14ms)
✓ with some emoji (3ms)
Snapshot Summary
› 2 snapshots written in 1 test suite.
Test Suites: 1 passed, 1 total
Tests: 2 passed, 2 total
Snapshots: 2 added, 2 total
Time: 7.925s
Ran all test suites.
Snapshots File
以下が作成される。
code:__snapshotes__/Storyshots.test.js.snap
exports[Storyshots Button with some emoji 1] = `
<button
😀 😎 👍 💯
</button>
`;
exports[Storyshots Button with text 1] = `
<button
Hello Button
</button>
`;