用Jest和Enzyme反应组件的测试状态

Question

我有一个简单的组件,您单击一个按钮,它使用提取来调用API并记录结果:

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {isLoading: false};
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({isLoading: true});
    return fetch('https://api.github.com/users/londonappdev')
      .then(res => {
        return res.json();
      })
      .then(data => {
        console.log(data);
        this.setState({isLoading: false})
      });
  }

  render() {
    return (
      <div className="App">
        <button onClick={this.handleClick}>Click</button>
      </div>
    );
  }
}

我想测试isLoading设置为true当请求正在进行中,然后设置为false一旦请求完成.

我的测试看起来像这样:

it('sets isloading to true while loading', () => {
  global.fetch = jest.fn().mockReturnValue(Promise.resolve({
    ok: true,
    json: () => Promise.resolve({'user': 'test'})
  }));

  const c = shallow(<App />);
  c.instance().handleClick().then(() => {
    expect(c.instance().state.isLoading).toEqual(false);
  });
  expect(c.instance().state.isLoading).toEqual(true);
});

这是有效的,但我的问题是:以这种方式测试状态是否安全/可靠？由于setState是异步的,是否可以expect(c.instance().state.isLoading).toEqual(true);在正确设置状态之前调用它？

有关测试此类组件的最佳方法的任何建议将非常感激.

Answer 1

是的,这是非常安全的.与此类似setTimeout(callback, 0),promise回调排队等待在其余同步代码之后运行.这可以确保您的断言将在程序中的正确位置运行.

单元测试的小技巧 - 而不是打电话给c.instance().handleClick()我打电话c.find('button').prop('onClick')().您的组件是您正在测试的"单元",因此您应该尽量避免访问内部方法/属性