Safetest

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

Hi there. I'm hrdtbs, a frontend expert and technical consultant. I started my career in the creative industry over 13 years ago, learning on the job as a 3DCG modeler and game engineer in the indie scene.

In 2015 I began working as a freelance web designer and engineer. I handled everything from design and development to operation and advertising, delivering comprehensive solutions for various clients.

In 2016 I joined Wemotion as CTO, where I built the engineering team from the ground up and led the development of core web and mobile applications for three years.

In 2019 I joined matsuri technologies as a Frontend Expert, and in 2020 I also began serving as a technical manager supporting streamers and content creators.

I'm so grateful to be working in this field, doing something that brings me so much joy. Thanks for stopping by.

All Posts

News bits

著者について

コンタクト