首页 文章

使用Jest在ReactJS组件中测试异步呈现

提问于
浏览 次
3

我有一个反应组件（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解析，然后检查渲染的组件并计算元素？

（如果改变了什么，我也在使用酶）

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

1 回答

  • 0

    由于信誉不佳，这不是评论:)您可以提取对 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>
        );
    }
}
    回复于

相关问题