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
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.
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.
test('Primary', () => {
// Primary.args渡さないと、全部同じスナップショットになる
const component = Renderer.create(<Primary {...Primary.args} />);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
もしかして、と思って storyshots で試してみたらうまくいってしまった w