Question

我有一个React组件，在安装过程中会执行这段代码

this.setState({ data: null, hasError:false, isLoading: true }
service.getData()
.then((response) => {
    this.setState({data:response})
}
.catch(() => {
    this.setState({ hasError: true})
}
.then(() => {
    this.setState({ isLoading: false})
}

service.getData返回一个Promise。我正在尝试测试此组件。我已经编写了一些测试来测试成功的getData请求，例如

const mockGetData = jest.fn().mockImplementation(()=>Promise.resolve("TESTSUCCESS"));
service.prototype.getData = mockGetData;
const wrapper = shallow(<MyComponent />);
await mockGetData;
expect(wrapper.state('data')).toBe("TESTSUCCESS");

这很好用。并且，例如，如果我在组件代码中将console.log放在“ then”中，然后在测试中将console.log放在等待状态之后。 “然后”日志位于“测试”日志之前。

例如，如果我尝试测试失败，

const mockGetData = jest.fn().mockImplementation(()=>Promise.reject("TESTFAILURE"));
service.prototype.getData = mockGetData;
const wrapper = shallow(<MyComponent />);
await mockGetData;
expect(wrapper.state('hasError')).toBe(true);

此测试失败。如果我将console.log添加到组件代码中的catch中，则即使我的测试日志在“ await”之后，该日志也会在我的测试日志之后显示。

我需要更改以解决此问题？我以为等待将等待整个链解决。如果不是，那么成功测试为何有效？我试过wrapper.update（）-这没有帮助。我相信这是基本的东西-请帮忙。

谢谢

开玩笑地等待异步拒绝

0 个答案: