使用Jest和Enzyme測試獲取請求

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()不會造成混亂，因為looks（surprise！）確實是不典型的：)因此，沒有人會認為您（錯誤地）依賴shallow()返回Promise（而事實並非如此）。

笑話沒有 “刷新承諾”之類的功能。 .runAllTimers()僅與setTimeout / setInterval ，實際上並不使它們同步而是加速它們（它們仍然是異步的）。

[UPD]如果您以某種方式等待所有異步任務完成，甚至不需要wrapper.update() 。 至少對我來說，在無需wrapper.update() codeandbox.io上工作正常