【備忘録】テストデータをモックデータに置き換える

やりたいこと

モックデータをセットし、データが置き換わっていることを確認したい

実装

App.spec.tsx

// 本番データはここのgetAllReocrds関数で取得してくる
import * as api from "../../utils/supabaseFunction";

jest.mock("../../utils/supabaseFunction");

describe("App", () => {
  test("モックで取得したデータが表示される", async () => {
    // getAllRecordsで取得するデータをモックデータに置き換える
    (api.getAllRecords as jest.Mock).mockResolvedValue([
      { title: "てすと", time: "33" },
      { title: "てすと2", time: "44" },
    ]);
  
    render(<App />);

    // モックデータは複数取れるので、find「All」ByTestIdで指定する
    const items = await screen.findAllByTestId("item");
    expect(items[0]).toHaveTextContent("てすと");
  });

App.tsx

{records.map((item, key) => {
  return (
    <>
      <p key={key} data-testid="item">{item.title}:{item.time}</p>
      <button onClick={() => handleDelete(item.id)}>×</button>
    </>
  )
})}

詰まっていたところ

await waitFor(()=>{})で取ろうとしてやり方がわからなかったり、screen.findAllByTestIdで取得しようとした。