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

Question

我正在使用 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);
});

有没有更好的方法来做到这一点？

谢谢！

Answer 1

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

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行代码，返回一个resolved的promise）