【Jest】StorybookのStoryを再利用してテストする

StorybookのStoryをJestに取り込んでコンポーネントのテストをしたい

このとき、必要なライブラリは以下だとわかった

• @testing-library/react
• @storybook/testing-react
• @testing-library/jest-dom

@testing-library/reactはReactの仮想DOMを操作するのに必要な{ fireEvent, render, screen }などの機能をもったライブラリ

@storybook/testing-reactはcomposeStoriesを使って、Storyをjestで利用できるようにするライブラリ

const { Default } = composeStories(Stories);

@testing-library/jest-domはtoHaveTextContentなどの便利なマッチャーを使うために導入した

ただ、これだけではdocument is not definedというエラーをはいてテストが失敗する

そこで、jest.config.jsに以下をいれてみる

module.exports = {
  testEnvironment: "jest-environment-jsdom",

これでJestでStoryを取り込んでテストできるようになった

ところで、Jest@v28からjsdomがデフォルトではインストールされなくなった

なので、jest-environment-jsdomをインストールして、jest.config.jsも以下のように書き直さなければならない

module.exports = {
-  testEnvironment: "jsdom",
+  testEnvironment: "jest-environment-jsdom",
 ...
};

From v27 to v28 · Jest