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

【问题标题】：Unit testing async rendering in ReactJS component with Jest使用 Jest 对 ReactJS 组件中的异步渲染进行单元测试
【发布时间】：2018-07-19 12:12:29
【问题描述】：

我有一个反应组件（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），假设我想编写一个测试来检查是否为数组“数据”中的每个项目呈现了“子组件”。我怎样才能做到这一点？ 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);
  });
});

【问题讨论】：

这行得通吗？ wrapper = await shallow(<MyComponent />);
不是那样，我不能在 Jest 公开的同步函数中使用 await 并且据我所知（我刚刚尝试过），浅表是一个同步函数（它不会返回承诺或等待）。即使有，它怎么知道要等待第二次渲染？

标签： reactjs jestjs

【解决方案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>
        );
    }
}

【讨论】：