monorepoとE2E
コンポーネントを共有するようなWebアプリケーションmonorepoがあるとして、これらはどのようにするのが良いのか悩んでいる(現在進行形)
こういうのにしてみたけど
monorepo/ ├── common # コンポーネントなど、projectsが呼び出す共通のデータが格納されているディレクトリ ├── e2e # テストが入ったディレクトリ └── projects # プロジェクトのモノレポ ├── hogehoge # hogehogeプロジェクト └── piypiyo # piyopiyoプロジェクト
hogehogeとpiyopiyoは似通ったシステムであり共通しているデータもあるが、それぞれ独自の機能も存在している。E2Eテストを書く場合はプロジェクトごとに書く必要がある。なお、すべてnode.js、またはtypescriptで記述されている。
e2eディレクトリには共通するテストを書き、それらは関数にて呼び出すようにする。
// e2e/toppage.test.ts import { test, expect, Page } from "@playwright/test"; export const toppageTest = (specData: any) => { test("トップページテスト1", async ({ page }) => { await page.goto("/"); // ... } ); }
projectはこれをimportして実行する。また、projectごとに行いたいテストはe2eディレクトリのnode_modules内のplaywrightをimportし、テストケースを記述する。
// projects/hogehoge/e2e/toppage.test.ts import { toppageTest } from "../../../e2e/toppage.test; import { test, expect, Page } from "../../../e2e/node_modules/@playwright/test"; const specData = {}; // hogehogeっぽいデータ toppageTest(specData); // 共通のテスト test("hogehogeプロジェクトのトップページ特有のテスト", async ({ page }) => { // hogehogeプロジェクトのトップページ特有のテスト });
これらはtypescriptで記述してあるので、tsconfig.jsonのpathsで設定を変えてあげた。
{ "compilerOptions": { "baseUrl": "./", "paths": { "@e2e": ["../../../e2e/*"], }, } }
とりあえずこういう形になった。
// projects/hogehoge/e2e/toppage.test.ts import { toppageTest } from "@e2e/toppage.test; import { test, expect, Page } from "@e2e/node_modules/@playwright/test"; const specData = {}; // hogehogeっぽいデータ toppageTest(specData); // 共通のテスト test("hogehogeプロジェクトのトップページ特有のテスト", async ({ page }) => { // hogehogeプロジェクトのトップページ特有のテスト });
なんかやりかたに進展があったらまた書いてみます。