使用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);
  });
});

- Arbiter

---

这样行吗？wrapper = await shallow(<MyComponent />); - anoop

不是这样的，我不能在像Jest暴露的同步函数中使用await。从我所知道的（我刚刚尝试过），shallow是一个同步函数（它不返回promise或可等待对象）。即使它这样做了，它怎么知道要等待第二次渲染呢？ - Arbiter

Answer 1

这不是答案（而是解决方法），但由于声望不高，我无法发表评论 :) 您可以将对externalLibrary.doStuff()的调用提取到组件类的单独方法中。然后可以测试此方法，而不管componentDidMount。由于React的开发人员做得很好，因此componentDidMount()内部的调用是有保证的。

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>
        );
    }
}

- Andrew Miroshnichenko