Компонент Test React (Jest & Enzyme), который визуализируется по-разному после Ajax

Question

Как вы тестируете компонент (скажем, <Person /> в этом случае), если это делает полностью, но только после <Loading /> завершается, что после успешного вызова Ajax?

Я использую Jest и Enzyme. Однако в Enzyme снимок будет иметь значение Person с компонентом Loading, а не окончательное состояние визуализации после вызова 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-вызов для аутентификации пользователей. В настоящее время это выдвигается на страницу ошибки.

Answer 1

Вы можете смоделировать вызовы 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);
});