javascript - axiosをモックしてテストするにはどうすればよいですか?

Question

反応ユニットテストの学習を始めたばかりで、モック全体が混乱し、理解できませんでした。

axios を使用してデータを取得し、ここでアプリ コンポーネントに表示します。

const [ data, setData ] = React.useState(null);

    useEffect(
        () => {
            const url = '/url';
            axios.get(url).then((res) => setData(res.data)).catch((err) => {
                console.log('error happened' + err);
            });
        },
        [ data ]
    );

    return (
        <div>
            {data ? <p data-testid="name">{data.name}</p> : <p data-testid="loading">Loading...</p>}
        </div>
    );

そして、 app.test.js で読み込みと名前付け全体をテストします。

afterEach(cleanup);

describe('App', () => {
    test('Render app', async () => {
        render(<App />);
        expect(screen.getByTestId('loading')).toBeInTheDocument();
        const name = await waitForElement(() => screen.getByTestId('name'));
        expect(name).toBeInTheDocument();
        expect(screen.queryByTestId('loading')).toBeNull();
    });
});

そして、これらすべてのテストが成功します。

私が達成したいのは、app.test.jsで最も簡単な方法でモックして、axios自体をテストするにはどうすればよいですか?