如何用酶测试具有asyn lifecircle功能的组件?

时间:2018-03-01 11:07:39

标签: javascript reactjs enzyme jest

我使用jest和酶来测试我的组件。在这个组件中,我将在componentDidMount中请求数据,然后它将使用数据呈现视图。

class App extends React.Component {
  async componentDidMount() {
    const data = await getData(); // send a request to server to get data

    this.setState({
      name: data.name,
    })
  }

  render() {
    return (
      <div>{this.state.name}</div>
    )
  }
}

这是一个非常简单的组件,只是在componentDidMount中使用异步函数,并以异步方式获取数据宽度,而不是回调。但是,我不知道如何测试这个组件。

我喜欢像这样编写测试代码

it('render', async () => {
  const container = mount(
    <App />  
  );  

  const instance = container.instance();
  console.log(instanct.state.name); // of course, state.name is undefined, but I want in this place, the state.name can be 'qyt'
});

1 个答案:

答案 0 :(得分:0)

我创建了一个demo project on Github here

我采用的解决方案是模拟getData模块:

let mockPromise;
jest.mock("./getData", () => {
  return jest.fn(() => {
    mockPromise = Promise.resolve({ name: "Spider man" });
    return mockPromise;
  });
});

然后我在测试中返回了mockPromise。在完成测试之前,Jest将等待承诺解决。

it("renders without crashing", () => {
  const wrapper = shallow(<App />);

  return mockPromise.then((a) => {
    wrapper.update();

    expect(wrapper.html()).toEqual(`<h1>Name: Spider man</h1>`);
  });
});