Vitestでdata-testidで取得した要素の文字列だけを期待したい

はじめに

• それらしいマッチャがなかった

問題

• domを厳密に比較してしまい落ちる

import { render } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
import { screen } from "@testing-library/react";
import App from "../App.tsx";
import { Provider } from "../components/ui/provider.tsx";

Object.defineProperty(window, "matchMedia", {
  writable: true,
  value: vi.fn().mockImplementation((query) => ({
    matches: false,
    media: query,
    onchange: null,
    addListener: vi.fn(),
    removeListener: vi.fn(),
    addEventListener: vi.fn(),
    removeEventListener: vi.fn(),
    dispatchEvent: vi.fn(),
  })),
});

describe("App", () => {
  it("タイトルがあること", () => {
    render(
      <Provider>
        <App />
      </Provider>,
    );
    const title = screen.getByTestId("title");
    expect(title).toContain("タイトル");
  });
});

解決

    expect(title).toContain("タイトル");

を

    expect(title.textContent).toContain("タイトル");

にして解決

終わりに