时间戳

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

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

问题描述

这是我的 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
})

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

我尝试过的事情：

1-使用此睡眠功能：

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

然后await sleep(1)在触发一个承诺后使用

2-使用此刷新承诺功能：

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

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

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

标签： javascriptpromisejestjs

解决方案

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

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

推荐阅读