実現したいこと
storybookのSnapshootsテストを実行した際、実行結果である__snapshots__フォルダーを各stories.jsファイルと同じディレクトリに生成させたいです。
現在の結果
以下の通り、src配下に新しく、src/component/~
フォルダーが作成されます。結果、__snapshots__フォルダーが各stories.jsファイルと1階層分ずれています。
環境
javascript + react + storybook
※ こちらの公式ドキュメントのチュートリアルに則り、プロジェクトを作成しています。
package.json
"dependencies": { "@testing-library/jest-dom": "^5.16.2", "@testing-library/react": "^12.1.2", "@testing-library/user-event": "^13.5.0", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "5.0.0", "web-vitals": "^2.1.4" }, "devDependencies": { "@storybook/addon-actions": "^6.3.12", "@storybook/addon-essentials": "^6.3.12", "@storybook/addon-interactions": "^6.3.12", "@storybook/addon-links": "^6.3.12", "@storybook/addon-storyshots": "^6.3.12", "@storybook/builder-webpack5": "^6.3.12", "@storybook/manager-webpack5": "^6.3.12", "@storybook/node-logger": "^6.3.12", "@storybook/preset-create-react-app": "^4.0.1", "@storybook/react": "^6.3.12", "@storybook/testing-library": "0.0.9", "@testing-library/react": "^12.1.0", "react-test-renderer": "^17.0.2", "webpack": "^5.68.0" }
storybook.test.js
こちらの公式ドキュメントのチュートリアルからstorybook.test.js
のみを以下の通りに変更しています。import initStoryshots, { multiSnapshotWithOptions, } from "@storybook/addon-storyshots"; initStoryshots({ test: multiSnapshotWithOptions() });
試したこと
こちらのissueを参考に__snapshots__フォルダーの位置を変更する設定を実施しました。
しかし、変わらず、src配下に新しくsrc/component/~
が生成され、解決できません。
- storybook.test.js
import initStoryshots, { multiSnapshotWithOptions, Stories2SnapsConverter, } from "@storybook/addon-storyshots"; initStoryshots({ test: multiSnapshotWithOptions(), stories2snapsConverter: new Stories2SnapsConverter({ snapshotsDirName: "./__snapshots__", }), });
__snapshots__フォルダーの出力先を設定することができれば、解決することができるかと考えていますが、方法がわからない状況です。
どなたかアドバイスをいただけないでしょうか。
何卒、よろしくお願いいたします。