Question

我开始学习测试React应用程序，现在我想测试获取请求，成功了，看起来好像可以正常工作，但是正确的方法是什么，这是我的尝试：

const fetchSpy = jest.spyOn(global, 'fetch')
        .mockImplementation(() => Promise.resolve({
            json: () => ([{ id: 0, title: "Title", body: "Body", userId: 1 }]),
        }));

    let wrapper = await shallow(<Posts />);

    expect(fetchSpy).toHaveBeenCalled();

    setTimeout(async () => {
        await wrapper.update()
        expect(wrapper.state('posts').length).toEqual(1)
    })

而且，还有什么更好的方法来等待组件更新而不是setTimeout？

Answer 1

不仅setTimeout有帮助，而且Promise.resolve()还将一些代码放在队列末尾。由于有了Promise，我们可以使用await并让Jest知道我们正在做异步操作，因此可能更清楚：

test('testing something', async () => {
    let wrapper = shallow(<Posts />); 
    await Promise.resolve(); 
    /* everything below is put in the end of the queue 
     - so after mocked fetch() has resolved and response processed */
    expect(fetchSpy).toHaveBeenCalled();
    // wrapper.update(); // it is not required
    expect(wrapper).toMatchSnapshot();
});

您的await shallow(...)做同样的事情：将所有内容都放在队列的末尾（就像是Promise.resolve(shallow(<Posts />)).then(<code below>)一样）。但是我相信await Promise.resolve()不会造成混乱，因为看起来（惊奇！）确实很不典型：)因此，没有人会认为您（错误地）依赖shallow()会返回Promise（并且不会）。

开玩笑does not have feature就像“同等承诺”。 .runAllTimers()仅与setTimeout / setInterval一起使用，实际上并不使它们同步，而是加快它们的速度（它们仍然是异步的）。

[UPD]如果您以某种方式等待所有异步任务完成，甚至不需要wrapper.update()。至少在没有wrapper.update()

的codeandbox.io上，它对我来说工作正常

使用Jest和Enzyme测试获取请求

1 个答案: