Javascript 用Jest和Enzyme测试fetch请求

我开始学习测试React应用程序，现在我想测试fetch请求，我成功了，看起来很有效，但正确的方法是什么，下面是我的尝试：

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)
    })

const fetchSpy=jest.spyOn（全局“fetch”）
.mock实现（（）=>Promise.resolve({
json:（）=>（[{id:0，title:“title”，body:“body”，userId:1}]），
}));
让包装器=等待浅（）；
expect（fetchSpy）.toHaveBeenCalled（）；
setTimeout（异步（）=>{
等待包装器。更新（）
expect（wrapper.state（'posts'）.length）.toEqual（1）
})

---

还有，等待组件更新而不是设置超时的更好方法是什么？

不仅

setTimeout

有帮助，而且

Promise.resolve（）

还将一些代码放在队列的末尾。由于有了

Promise

我们可以使用

wait

并让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();
});

test（'testingsomething'，async（）=>{
让包装器=浅（）；
等待承诺；
/*下面的所有内容都放在队列的末尾
-所以在mock fetch（）解析并处理响应之后*/
expect（fetchSpy）.toHaveBeenCalled（）；
//wrapper.update（）；//这不是必需的
expect（wrapper.toMatchSnapshot（）；
});

您的

wait shall（…）

也会这样做：将下面的所有内容都放在队列的末尾（就像是

Promise.resolve（shall（））。然后（）

）。但我相信

等待承诺。resolve（）

不会那么令人困惑，因为它看起来（令人惊讶！）非常不典型：），所以没有人会认为你（错误地）依赖

shall（）

返回承诺（事实并非如此）

开玩笑似的“花红的承诺”

.runAllTimers（）

仅适用于

setTimeout

/

setInterval

并且实际上不使它们同步，而是加速它们（它们仍然是异步的）

[UPD]如果您以某种方式等待所有异步任务完成，您甚至不需要

wrapper.update（）

。至少我在codesandbox.io上没有

wrapper.update（）