Storybook v6とsnapshot testの練習

2020/09/27

[ react / storybook / storyshots ]

試したもののリポジトリ

環境

React（上のリポジトリは create-react-app）
TypeScript
Styled components
Storybook

create-react-app / storybook はかんたんだった

$ npx create-react-app react-sb-practice --template typescript
$ cd react-sb-practice/
$ npx sb init

styled components は最初 babel macro を使ってて、ts-jest でテストしたときにエラーになったので戻した(素の styled-components から import するように修正したdiff)

FYI: styled components の Babel Macro

追記: 2020 / 10 / 8

storyshots 使うと、styled-component で設定した CSS が全部 diff として出てしまう。。。

diff --git a/src/components/TextLink/index.tsx b/src/components/TextLink/index.tsx
index 73d34ed..840a40e 100644
--- a/src/components/TextLink/index.tsx
+++ b/src/components/TextLink/index.tsx
@@ -7,7 +7,7 @@ export interface TextLinkProps extends React.ComponentPropsWithoutRef<'a'> {
 }

 const StyledAnchorElement = styled.a<TextLinkProps>`
-  color: ${({ color }) => color === "blue" ? "#61dafb" : "#ccc"};
+  color: ${({ color }) => color === "blue" ? "#61dafb" : "#ddd"};
   font-weight: ${({ bold }) => bold ? "bold" : "normal"};
 `;

上のように色の修正だけした場合でも $ yarn run src/Storyshots.test.js を実行すると以下のような diff が出てしまう

  ● Storyshots › Components/TextLink › Secondary

    expect(received).toMatchSnapshot()

    Snapshot name: `Storyshots Components/TextLink Secondary 1`

    - Snapshot  - 2
    + Received  + 2

    @@ -1,8 +1,8 @@
      .c0 {
    -   color: #ccc;
    -   font-weight: normal;
    +   color: #ddd;
    +   font-weight: normal;
      }

      <a
        className="c0"
        color="gray"

      at match (node_modules/@storybook/addon-storyshots/dist/test-bodies.js:22:32)
      at node_modules/@storybook/addon-storyshots/dist/test-bodies.js:34:16
      at node_modules/@storybook/addon-storyshots/dist/test-bodies.js:41:52
      at Object.<anonymous> (node_modules/@storybook/addon-storyshots/dist/api/snapshotsTestsTemplate.js:42:20)

  ● Storyshots › Components/TextLink › Secondary Bold

    expect(received).toMatchSnapshot()

    Snapshot name: `Storyshots Components/TextLink Secondary Bold 1`

    - Snapshot  - 2
    + Received  + 2

    @@ -1,8 +1,8 @@
      .c0 {
    -   color: #ccc;
    -   font-weight: bold;
    +   color: #ddd;
    +   font-weight: bold;
      }

      <a
        className="c0"
        color="gray"

      at match (node_modules/@storybook/addon-storyshots/dist/test-bodies.js:22:32)
      at node_modules/@storybook/addon-storyshots/dist/test-bodies.js:34:16
      at node_modules/@storybook/addon-storyshots/dist/test-bodies.js:41:52
      at Object.<anonymous> (node_modules/@storybook/addon-storyshots/dist/api/snapshotsTestsTemplate.js:42:20)

 › 2 snapshots failed.

master ブランチの直接スナップショットテストのコードを書いて実行してく方式だと意図した diff になる

 FAIL  src/components/TextLink/index.test.tsx
  ✓ Primary (16ms)
  ✕ Secondary (4ms)
  ✓ PrimaryBold (1ms)
  ✕ SecondaryBold (1ms)

  ● Secondary

    expect(received).toMatchSnapshot()

    Snapshot name: `Secondary 1`

    - Snapshot
    + Received

    @@ -1,7 +1,7 @@
      .c0 {
    -   color: #ccc;
    +   color: #ddd;
        font-weight: normal;
      }

      <a
        className="c0"

      18 |   const component = Renderer.create(<Secondary {...Secondary.args} />);
      19 |   const tree = component.toJSON();
    > 20 |   expect(tree).toMatchSnapshot();
         |                ^
      21 | });
      22 |
      23 | test("PrimaryBold", () => {

      at Object.<anonymous> (src/components/TextLink/index.test.tsx:20:16)

  ● SecondaryBold

    expect(received).toMatchSnapshot()

    Snapshot name: `SecondaryBold 1`

    - Snapshot
    + Received

    @@ -1,7 +1,7 @@
      .c0 {
    -   color: #ccc;
    +   color: #ddd;
        font-weight: bold;
      }

      <a
        className="c0"

      30 |   const component = Renderer.create(<SecondaryBold {...SecondaryBold.args} />);
      31 |   const tree = component.toJSON();
    > 32 |   expect(tree).toMatchSnapshot();
         |                ^
      33 | });
      34 |

      at Object.<anonymous> (src/components/TextLink/index.test.tsx:32:16)

 › 2 snapshots failed.

Storyshots を使わないでスナップショットを行う

CSF で storybook を書くと、各 story が functional component になっている
テストコードで story を import すればスナップショットテストがかんたんにできる
Storybook v6 の Args 使った書き方していると、テストコードで args を props に渡さないと反映されなくてちょっと躓いた

test('Primary', () => {
  // Primary.args渡さないと、全部同じスナップショットになる
  const component = Renderer.create(<Primary {...Primary.args} />);
  const tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});

Storyshots を使う

もともと上のやり方、storybook v5.x のときに jest-styled-components とスナップショットファイル分割のテスト（multiSnapshotWithOptions）と組み合わせが悪くて実装したテストだった
もしかして、と思って storyshots で試してみたらうまくいってしまった w
- コツが issue でコメントされてた
- 冒頭のリポジトリの feature/storyshots で試してる
仕事で使ってる環境でも storybook バージョンアップしながらもっかい storyshots 試そうと思った

その他

Storybook v6 は勝手に addon-knobs みたいなコントロールが作成されるし Args 便利

This content is built with Gatsby