Question

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

Answer 1

我创建了一个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>`);
  });
});

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

1 个答案: