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-使用此睡眠功能：

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

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

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

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

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

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

Answer 1

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

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

开玩笑地等待诺言解决，然后再找到元素

1 个答案: