編集

Safetest

#Safetest #Playwright #Vitest #Jest

Safetest は、Netflix の開発した Playwright や Vitest/Jest を組みわせたテストライブラリです。

https://github.com/kolodny/safetest?tab=readme-ov-file

従来のフロントエンドのテスト手法である単体/統合テストや E2E テストの欠点を、両方を組み合わせることで補完することを目的としています。アプリケーションの起動時にテスト用のフックをインジェクトする仕組みのため、ブラウザとテストコンテキスト間の双方向通信や、Playwright や Jest/Vitest の機能へのアクセスも可能になっています。

テストの記述方法は、見慣れたものです。

jsx
// Header.tsx
export const Header = ({ admin }: { admin: boolean }) => (
  <div className="header">
    <div className="header-title">The App</div>
    <div className="header-user">
      <div className="header-user-name">admin</div>
      {admin && <div className="header-user-admin">admin</div>}
      <div className="header-user-logout">Logout</div>
    </div>
  </div>
);
// Header.safetest.tsx
import { describe, it, expect } from "safetest/jest";
import { render } from "safetest/react";
import { Header } from "./Header";

describe("Header", () => {
  it("can render a regular header", async () => {
    const { page } = await render(<Header />);
    await expect(page.locator("text=Logout")).toBeVisible();
    await expect(page.locator("text=admin")).not.toBeVisible();
    expect(await page.screenshot()).toMatchImageSnapshot();
  });

  it("can render an admin header", async () => {
    const { page } = await render(<Header admin={true} />);
    await expect(page.locator("text=Logout")).toBeVisible();
    await expect(page.locator("text=admin")).toBeVisible();
    expect(await page.screenshot()).toMatchImageSnapshot();
  });
});

なお、実験的ですが Playwright にも Component 単位でのテストを可能にする似たようなことが出来る機能が入っています。

https://playwright.dev/docs/test-components

編集