Реагируйте на состояние тестирования компонента с помощью Jest и Enzyme

Question

У меня есть простой компонент, где вы нажимаете кнопку, и он использует fetch для вызова 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), обратные вызовы обещания ставятся в очередь для запуска после остальной части синхронного кода. Это гарантирует, что ваши утверждения будут выполняться в правильных точках вашей программы.

Небольшой совет для модульного тестирования - вместо вызова c.instance().handleClick() я бы назвал c.find('button').prop('onClick')(). Ваш компонент - это тестируемый «модуль», поэтому вам следует избегать доступа к внутренним методам / свойствам