时间戳

首页 > 解决方案 > 如何在单元测试之前等待组件的挂载回调中的异步调用完成？

javascript - 如何在单元测试之前等待组件的挂载回调中的异步调用完成？

问题描述

我正在使用 Jest 对在其mounted()方法中进行 Axios 调用的组件进行单元测试。我正在模拟 Axios 调用，因此它返回一个承诺，因此实际上并未进行 API 调用。但问题似乎是因为 Axios 是异步的，我如何告诉我的测试在运行我的期望之前等待 Axios 调用（甚至是假的）完成？

这不起作用：

it('calls auth api', () => {
    spyOn(axios, 'get').and.callFake(() => Promise.resolve().then(() => authResponse));
    wrapper = shallowMount(App, {
        localVue,
    });
    expect(axios.get).toHaveBeenCalledWith('api/auth');
    // The "status" data is set in the axios callback. But this fails.
    expect(wrapper.vm.status).toBe('AUTHORIZED');
});

如果我将它包装在超时中，它确实有效。我想我读过这是因为在解决承诺后总是调用超时或什么？

it('calls auth api', () => {
    spyOn(axios, 'get').and.callFake(() => Promise.resolve().then(() => authResponse));
    wrapper = shallowMount(App, {
        localVue,
    });
    expect(axios.get).toHaveBeenCalledWith('api/auth');
    setTimeout(() => {
        expect(wrapper.vm.status).toBe('AUTHORIZED');
    }, 0);
});

有一个更好的方法吗？

谢谢！

标签： javascriptvue.jsvuejs2jestjsaxios

解决方案

未经测试，但以下不起作用？

const flushPromises = require('flush-promises');


it('calls auth api', async () => {
    spyOn(axios, 'get').and.callFake(() => Promise.resolve().then(() => authResponse));
    wrapper = shallowMount(App, {
        localVue,
    });

    await flushPromises(); // <<     

    expect(axios.get).toHaveBeenCalledWith('api/auth');
});

（您需要添加https://www.npmjs.com/package/flush-promises（或自己编写，大约 4 行代码，返回已解决的承诺）

推荐阅读