Сохраняйте контекст "this" при использовании функции Promise для компонента

Question

У меня проблема с тем, что я не могу ссылаться на ключевое слово this через Jest при тестировании логики в моем методе componentDidMount. Так что, как только я попаду в ответ на обещание, когда я наведу курсор мыши на this в this.props (или this.setState), он просто покажет undefined.

Это метод в моем компоненте приложения:

componentDidMount() {
  myHttpService.getUser(this.props.userId).then(response => {
    if (response.user !== null) {
      this.setState({ user: response.user });
    } else {
      this.props.history.push('/login');
    }
  });
}

Это мой модульный тест для этого компонента:

it('push login route to history if no user is returned', () => {
  myHttpService.default.getUser = jest.fn(() =>
    Promise.resolve({ user: null }),
  );

  const result = renderer.create(
    <MemoryRouter>
      <App />
    </MemoryRouter>,
  );

  // Not sure how to check that route was pushed to history, trying to solve the this context issue first.
  // expect(?).toHaveBeenCalled();
});

Answer 1

Макет службы в вашем тестовом файле

jest.mock('<path-to-your myHttpService>', () => {
  return function() {
    return { getUser: () => Promise.resolve({ user: null }) };
  };
});

Вы можете сделать следующее для утверждения с Jest

let instance = result.getInstance();
let history = instance.history;
expect(history.location.pathname).to.equal('/login');

Вот полный рабочий репо на github