reactjs - 使用 Jest 对 ReactJS 组件中的异步渲染进行单元测试

Question

我有一个 react 组件(16.2):

import externalLibrary from 'wherever';

class MyComponent extends React.Component {
    componentDidMount() {
      externalLibrary.doStuff().then((data) => {
        this.setState({ ...this.state,
          data: data
        });
      });
    }

    render() {
        return ( 
          <div> 
            {this.state.data.map((d) => <SubComponent key={d.id}
              data={d} />)} 
          </div>
        );
    }
}

我想对此进行单元测试(使用 Jest)，假设我想编写一个测试来检查是否为数组“data”中的每个项目呈现了“SubComponent”。我怎样才能做到这一点？ React 的所有异步代码示例都假设我想测试异步代码，但在本例中我想测试它是否正确呈现。您可以假设“externalLibrary”已正确模拟，并且我们知道 doStuff() 将解析其中包含三个项目的数据数组。如何告诉 Jest 代码等待，直到 componentDidMount (doStuff()) 内的 Promise 解析，然后检查渲染的组件并计算元素数量？

(如果这改变了什么，我也使用 enzyme )

import { shallow } from 'enzyme';
import MyComponent from './MyComponent';
import SubComponent from './SubComponent';

describe("<MyComponent />", () => {
  it("Renders the correct number of SubComponents", done => {
    wrapper = shallow(<MyComponent />);
    // This fails because it runs before the subcomponents are rendered
    expect(wrapper.find(SubComponent)).toHaveLength(3);
  });
});

Answer 1

这不是答案(而是解决方法)，但由于声誉较低，我无法发表评论:)您可以提取对 externalLibrary.doStuff() 的调用来分离组件类的方法。然后测试这个方法，不管 componentDidMount 是什么。 componentDidMount() 内的调用是有保证的，因为 React 的人做得很好。

import externalLibrary from 'wherever';

class MyComponent extends React.Component {
    componentDidMount() {
      this.retrieveData();
    }

    retrieveData() {
      externalLibrary.doStuff().then((data) => {
        this.setState({ ...this.state,
          data: data
        });
      });
    }

    render() {
        return ( 
          <div> 
            {this.state.data.map((d) => <SubComponent key={d.id}
              data={d} />)} 
          </div>
        );
    }
}