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

Question

这是我的 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-使用此睡眠 function：

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

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

2-使用此刷新承诺 function：

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

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

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

Answer 1

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

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