2

<Person />如果组件完全呈现但仅在<Loading />完成后（即在成功的 Ajax 调用之后）呈现，您如何测试组件（在这种情况下）？

我正在使用 Jest 和 Enzyme。然而，使用 Enzyme，快照将是带有 Loading 组件的 Person，而不是 Ajax 调用之后的最终呈现状态。我需要模拟我的 Ajax 调用，但是模拟然后拍摄快照会是什么样子？

class Person extends Component {
...
   componentWillMount() {
     // ajax call to person data, including ID
     // on successful Ajax completion, set state.personID and other values, etc. 

     axios.get('.../person', {
      params: {
        AltID: 12345
        }
     }).then(function (response) {
      this.setState({personID: response.data.personID,...});

     }).catch(function (error) {
      ...
     });
   }

    render() {
      if (!this.state.personID) {
        return (
          <div className="App">
            <Loader />
          </div>);
      }
      return (
        <div className="App">
          ...
          Person ID: {{this.state.personID}}
          ...
        </div>
      );
    }
}

酶快照测试（需要修饰）：

describe('Person', () => {
  it('renders correctly', () => {
    const rendered = renderer.create(<Person />);
    expect(rendered.toJSON()).toMatchSnapshot();
  });
});

最后，像this.setState({personID: value})在测试中设置这样的解决方法不是我想要的，因为在真正的未发布场景中，componentWillMount执行 Ajax 调用来验证用户身份。目前，这被推送到错误页面。

4

1 回答 1

0

您可以模拟 api 调用https://facebook.github.io/jest/docs/en/tutorial-async.html或者您可以只进行 2 个测试，一个条件为 True，另一个条件为 False。您的 api 调用只是将状态从一种状态更改为另一种状态，因此...您需要根据状态测试一切是否正确呈现。

例子：

test('the data is peanut butter', done => {
  function callback(data) {
    expect(data).toBe('peanut butter');
    done();
  }W

  fetchData(callback);
});
于 2017-11-05T00:24:40.913 回答