フロントエンドテスト

VRT

Chromaticでモーダルやダイアログ、ドロップダウンのような開いたり閉じたりするインタラクティブなコンポーネントをVRTしたいときはplay関数を使う

~.stories.tsx

...
import { userEvent, within } from '@storybook/testing-library';
...

const Template: Story<FavoriteBeefBowlRestaurantSelectProps> = ({ ...args }) => {
  return (
    <FavoriteBeefBowlRestaurantSelect {...args} />
  );
};

export const Default = Template.bind({});
Default.args = {
  ariaLabel: '好きな牛丼屋を選択',
  ...
};
Default.play = async ({ canvasElement }) => {
  const canvas = within(canvasElement);
  const favoriteBeefBowlRestaurantSelectbox = canvas.getByRole('combobox', {
    name: '好きな牛丼屋を選択',
  });
  await userEvent.click(favoriteBeefBowlRestaurantSelectbox);
};

やじはむ

例えば共通のUIコンポーネントとかのアクセシビリティ検証をしたいときは@testing-library/jest-domのマッチャーを使って行うことができる

import { composeStories } from "@storybook/testing-react";
import { render, screen } from "@testing-library/react";
import * as stories from "./index.stories";

const { FullProps } = composeStories(stories);

test("TextareaWithInfo", async () => {
  render(<FullProps />);
  expect(screen.getByRole("textbox")).toHaveAccessibleName("記事本文");
  expect(screen.getByRole("textbox")).toHaveAccessibleDescription(
    "半角英数64文字以内で入力してください"
  );
  expect(screen.getByRole("textbox")).toHaveErrorMessage(
    "不正な文字が含まれています"
  );
});

やじはむ

mswのセットアップ

セットアップ関数の作成
関数の引数に可変超引数を使用しているが、これにより任意の数の RequestHandler オブジェクトを渡すことができ、各々のインターセプトが有効になる

src/tests/jest.ts

import type { RequestHandler } from "msw";
import { setupServer } from "msw/node";

export function setupMockServer(...handlers: RequestHandler[]) {
  const server = setupServer(...handlers);
  beforeAll(() => server.listen());
  afterEach(() => server.resetHandlers());
  afterAll(() => server.close());
  return server;
}

各テストファイルでmswサーバーをセットアップする

services/client/MyProfile/__mock__/msw.ts

import { rest } from "msw";
import { path } from "..";
import { getMyProfileData } from "./fixture";

export function handleGetMyProfile(args?: {
  mock?: jest.Mock<any, any>;
  status?: number;
}) {
  return rest.get(path(), async (_, res, ctx) => {
    args?.mock?.();
    if (args?.status) {
      return res(ctx.status(args.status));
    }
    return res(ctx.status(200), ctx.json(getMyProfileData));
  });
}

export const handlers = [handleGetMyProfile()];

テストファイルでサーバーを使用

~/MyProfile/PostForm/index.test.tsx

import { handleGetMyProfile } from "@/services/client/MyProfile/__mock__/msw";
import { setupMockServer } from "@/tests/jest";

setupMockServer(handleGetMyProfile());

このスクラップは2024/04/20にクローズされました