StorybookのStoryshots入れるだけでやたら手こずった

概要

Rustで遊ぶのも一区切りにして自分のアプリ開発再開するぞ！
と思ってまずはフロント開発の再開

Storybook入れて
Storyshots addonも入れて
CIで走らせて継続してコンポーネントが可視化・再利用できるようにしたかった・・・

けど、Storyshots入れるの地味に躓きまくったのでメモっとく

最初にやったこと

Storybookの初期化

npx sb init

これで実行ディレクトリにstories的なディレクトリが生成されて
Button.stories.tsx, Button.tsxとかのファイルが中にできてる

StoryshotsのAddon追加

yarn add -D @storybook/addon-storyshots

Storyshots用のファイル追加

stories/Storyshots.test.ts

import initStoryshots from "@storybook/addon-storyshots";

initStoryshots();

jestを入れとく

yarn add -D jest

あとはこれでyarn jest実行すれば
snapshotのテストがうまく動き始める！！

...はずが詰まりに詰まった

つまずいたとこ

SyntaxError '<'出ちゃった

↓こんなの

Unexpected error while loading ./Button.stories.tsx: SyntaxError: Unexpected token '<'

↓こんな感じのごちゃごちゃ設定してたら出なくなった

 yarn add -D ts-jest ts-node

jest.config.ts

import type {Config} from '@jest/types';

const config: Config.InitialOptions = {
    verbose: true,
    // ↓transformちゃんとかく
    transform: {
        "^.+\\.(ts|tsx|js)$": "ts-jest"
    },
    globals: {
        // tsconfigでpreserve->reactにしちゃうと
	// Babelを含むNext.jsでうまく動かなくなるので
	// 以下の通りテスト時に書き換える
        'ts-jest': {
            tsconfig: {
                jsx: 'react'
            }
        }
    }
};
export default config;

STORYBOOK_HOOKS_CONTEXT of undefined

こんなの出た

TypeError: Cannot read properties of undefined (reading 'STORYBOOK_HOOKS_CONTEXT')

window.STORYBOOK_HOOKS_CONTEXTにmockをセット

stories/Storyshots.test.ts

import initStoryshots from "@storybook/addon-storyshots";

// ↓これ追加
jest.mock("global", () => Object.assign(global, {window: {STORYBOOK_HOOKS_CONTEXT: ""}}));

initStoryshots();

mdxでSyntaxErrorでた

↓こんなの

Unexpected error while loading ./Introduction.stories.mdx: SyntaxError: Cannot use import statement outside a module

テストしたいのcomponentだけだからmdxファイルは無視した

jest.config.ts

const config: Config.InitialOptions = {
    verbose: true,
    // ↓これ追加
    moduleNameMapper: {
        "\\.(mdx)$": "<rootDir>/.jest/__mocks__/mdx.ts"
    },
    // ...

.jest/__mocks__/mdx.ts

export default '';

cssでSyntaxErrorでた

↓こんなの

 /.../styles/globals.css:2
    body {
         ^

    SyntaxError: Unexpected token '{'

cssファイルの参照もmockでみないようにした

jest.config.ts

const config: Config.InitialOptions = {
    verbose: true,
    moduleNameMapper: {
        // ↓これ追加（ついでにバイナリ系もmock
        "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/.jest/__mocks__/file.ts",
        "\\.(css|less)$": "<rootDir>/.jest/__mocks__/style.ts",
    // ...

.jest/__mocks__/file.ts

export default '';

.jest/__mocks__/style.ts

export default {};

yarn jestしたらついに来た！！！

まとめ

1ヶ月もしたら忘れそうなのでメモ