fetchを呼び出してるReactコンポーネントのテストをしたい(調査中メモ)

import { render, screen, waitFor } from '@testing-library/react';
import '@testing-library/jest-dom';
import { useEffect } from 'react';

function Heading({ callback }: { callback: () => void }) {
    useEffect(() => {
        async function f() {
            await fetch('https://localhost/');
            callback();
        }

        f();
    }, [callback]);
    return <h1>Hello</h1>;
}

describe('Heading', () => {
    it('sample test', async () => {
        const mock = jest.fn();
        render(<Heading callback={mock} />);
        expect(screen.getByRole('heading', { name: 'Hello' })).toBeInTheDocument();
        waitFor(() => expect(mock).toHaveBeenCalled());
  });
});

サンプルでこのコードに特に意味はない。最初にコンポーネントがレンダリングされるときにAPI経由で何かデータ取ってきて それを表示したい、そのためのテストコードのサンプル。 これをテスト実行するとReferenceError: fetch is not definedが出る。testEnvironment: "jsdom"だとこうなるらしい。 Node18なのでnode環境ならfetchはあるはず。

調べているとテストにはMock Service Workerを使えというのやjest-fetch-mockを使えというのがあった。これから試してみる。