PlaywrightでMUIのDialogをテストする

Playwright で MUI の Dialog コンポーネントをテストするのに手間取ったのでメモ。

import {
  Button,
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  DialogContentText,
} from "@mui/material";
import { test, expect } from "@playwright/experimental-ct-react";

test("MUI の Dialog のテスト", async ({ page, mount }) => {
  const component = await mount(
    <Dialog open onClose={() => {}}>
      <DialogTitle>ダイアログタイトル</DialogTitle>
      <DialogContent>
        <DialogContentText>ダイアログ本文</DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button color="primary">OK</Button>
        <Button color="inherit">キャンセル</Button>
      </DialogActions>
    </Dialog>,
  );

  await expect(page.getByText("ダイアログタイトル")).toBeVisible();
  await expect(page.getByText("ダイアログ本文")).toBeVisible();
});

mount が返す component ではなく、pape の方を確認しないといけなかった。