フロントエンド開発といえば。
react アプリの初期化( npm init vite@latest <アプリ名> )

jest で 描画されたコンポーネントをブラウザで確認する jest-preview

● jest-preview のインストール

npm install --save-dev jest-preview

● jest-preview の起動

npx jest-preview

ブラウザが次のURLで自動的に開きます http://localhost:3336/

● テストケースに debug() メソッドを追加

MyComponent.spec.tsx (デバッグしたいjestファイル)

import { debug } from "jest-preview"
    // eslint-disable-next-line testing-library/no-debugging-utils
    debug()

jest を実行する

npm run test MyComponent.spec.tsx

これだけでブラウザに画面が表示されます。 便利!

No.2424
11/24 17:01

edit