开玩笑地等待 promise 解决，然后再找到一个元素答案

【问题标题】：Jest wait for promise to resolve before finding an element开玩笑地等待 promise 解决，然后再找到一个元素
【发布时间】：2020-04-05 02:12:38
【问题描述】：

这是我的 React 示例代码（实际代码与此非常相似，但太长，无法放在这里）：

class Test extends Component {  
    state = {
        show: false
    }
    render() {
        return (
        <>
        {this.state.show && <div>Hello</div>}
        <button
            onClick={() => {

                //an ajax call to fetch data from server
                new Promise((resolve) => resolve(null)).then(() => {
                this.setState({show: true})
                })
            }}
        />
        </>
      )
    }
}

开玩笑的测试如下：

it('test', () => {
    const component = mount(< Test />);
    expect(component.find('div').length).toEqual(0); //passes

    component.find('button').prop<Function>('onClick')();
    expect(component.find('div').length).toEqual(1); //unstable response
})

现在我面临的问题是，当我运行这种测试时，在哪里可以找到组件取决于 Promise 解析，测试是不稳定的。有时它们会通过，有时却找不到组件。

我尝试过的事情：

1- 使用此睡眠功能：

const sleep = (milliseconds: number) => {
  return new Promise<number>(resolve => setTimeout(resolve, milliseconds));
};

然后在触发promise后使用await sleep(1)

2- 使用这个刷新承诺函数：

const flushPromises = () => {
  return new Promise(resolve => setImmediate(resolve));
}

但我无法找到我想要的稳定性。这导致的另一件事是，如果存在链式 Promise，则测试（主要但并非总是因此不稳定）在所有 Promise 解决之前退出（这显然会导致测试失败）。我试图增加超时（it 的第三个参数）并使用 done 回调，但没有用。

有人可以解释我在这里做错了什么以及承诺解决在jest 测试环境中是如何工作的。

【问题讨论】：

标签： javascript promise jestjs

【解决方案1】：

也许您可以以不同的方式测试 div。通过设置状态来测试 div DOM 是否存在。

  component.setState({ show: true }); 
  expect(component.find("div").length).toEqual(1);

【讨论】：

如果我想检查我的组件发送到服务器的 POST 正文是否符合预期怎么办？我能以某种方式拦截承诺吗？目前我正在通过jest.mock 模拟ajax 调用，但我认为我们不能在该函数中使用expect