如何在使用酶测试时等待componentDidMount中的setState解析？

Question

我试图测试运行一些异步代码并在componentDidMount中调用setState的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;

这是测试用例.我正在使用开玩笑和酶.

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中,我可以使它工作,但这似乎是一种相当hacky方式.我应该怎么做呢？

Answer 1

您需要通过使用async/await或从测试中返回承诺来通知笑话有关承诺的信息，请查看文档

describe('<AsyncComponent />', () => {
  it('Should render loaded component.', async() => {
    const promise = Promise.resolve(TestComponent);
    const rendered = mount(<AsyncComponent component={promise} />);
    await promise
    expect(rendered.state().loaded).toBe(true);
  });
});