我如何通过模拟来测试 axios 本身？

Question

我刚开始学习 React 单元测试，整个模拟的东西让我感到困惑，我无法理解它。

我正在使用 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 本身？

Answer 1

您可以为您的请求尝试这两种情况，其中失败和成功并相应地进行一些断言。至于涉及 axios 的测试工作流，这个答案在不使用任何额外库的情况下很好地描述了它：whosebug.com/a/51654713/7040146

我如何通过模拟来测试 axios 本身？

How can I test axios itself with mocking it?

javascript

unit-testing

reactjs

react-test-renderer

react-testing-library