如何测试以下组件?
import React from "react";
class ModuleLoader extends React.Component {
state = {
Module: null
};
componentDidMount() {
this.props
.Module()
.then(loaded => {
this.setState({ Module: loaded.default });
})
}
render() {
if (this.state.error) {
return "error";
}
if (!this.state.Module) {
return "loading";
}
return <this.state.Module {...this.props} />;
}
}
export default ModuleLoader;
Prop 模块是通过动态导入返回 Promise 的函数。当该导入被解析并加载时,它会返回一个 react 组件,该组件应该存储在状态中并呈现。那么测试应该是什么样子才能让组件解析网络请求加载它、显示它并在渲染后检查断言?
我希望有一些东西可以检查渲染组件的状态是否发生变化。但我无法资助文档中的类似内容。
我正在使用 Meteor
、Mocha
和 Enzyme
。
如果无法使用 Enzyme
测试组件,我可以改用替代方案。
谢谢。
最佳答案
解决方案是正确使用 Promise 和 await
。
it('renders', async () => {
const props = {
Module: () =>
Promise.resolve({
default: () => <span>Im loaded!</span>,
}),
};
const component = mount(<ModuleLoader {...props} />);
expect(component).toMatchSnapshot();
await Promise.resolve(); // tick so promises resolve
expect(component.update()).toMatchSnapshot();
});
来源:https://gist.github.com/danielhusar/8df72f5677ec69cb9774c1d5c561c56a
关于javascript - 状态更改后测试 react 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52629889/