我正在尝试测试运行一些异步代码并在 componentDidMount 中调用 setState 的 React 组件。
这是我要测试的 react 组件:
/**
*
* AsyncComponent
*
*/
import React from 'react';
class AsyncComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
loaded: false,
component: null,
};
}
componentDidMount() {
this.props.component.then(component => {
this.setState({
loaded: true,
component: component.default ? component.default : component,
});
});
}
render() {
if (!this.state.loaded) {
return null;
}
const Component = this.state.component;
const { component, ...rest } = this.props;
return <Component {...rest} />;
}
}
export default AsyncComponent;
这是测试用例。我正在使用笑话和 enzyme 。
import React from 'react';
import { mount } from 'enzyme';
import AsyncComponent from '../index';
const TestComponent = () => <div>Hello</div>;
describe('<AsyncComponent />', () => {
it('Should render loaded component.', () => {
const promise = Promise.resolve(TestComponent);
const rendered = mount(<AsyncComponent component={promise} />);
expect(rendered.state().loaded).toBe(true);
});
});
测试失败,因为 state.loaded 仍然设置为 false。有没有办法确保在调用 expect 之前 AsyncComponent 已完全加载?
如果我将期望断言包装在 setTimeout 中,我可以让它工作,但这似乎是一种相当笨拙的方法。我该怎么做呢?
最佳答案
我遇到了同样的问题,我想出了一些笨拙的解决方案,我在 componentDidMount 中有一些函数调用,我想检查该函数是否已被调用,以便代码对我有用
const loadFiltersTree = jest.fn()
const wrapper = shallow(<FilterTree loadFiltersTree={loadFiltersTree} />)
jest.useFakeTimers()
jest.runAllTimers()
setImmediate(() => {
expect(loadFiltersTree.mock.calls.length).toEqual(1)
})
关于reactjs - 用 enzyme 测试时如何等待componentDidMount中的setState解决?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44428578/