Как проверить, был ли вызван метод внутри componentDidMount?

Question

У меня следующий жизненный цикл componentDidMount:

componentDidMount () {
    window.scrollTo(0, 0);

    this.setState({
      loading: true,
    });

    if (token) return this.getUserData();
    return this.guestUserData();
  }

Я хочу проверить в jest / энзиме, запускался ли componentDidMount и вызывался ли guestUserData.

Я написал следующий тест:

test("should call method in componentDidMount", () => {
    Component.prototype.guestUserData = jest.fn();
    const spy = jest.spyOn(Component.prototype, 'guestUserData');

    const wrapper = shallow(<Component {...defaultProps} />);
    expect(spy).toHaveBeenCalled();
  });

но у меня сейчас ошибка:

TypeError: Cannot set property guestUserData of #<Component> which has only a getter

Может кто-нибудь посоветовать, как проверить, был ли метод вызван в жизненном цикле и был ли жизненный цикл вызван сам в одном тесте, если это возможно

Answer 1

Просто не надо. Я полагаю, что getUserData вызывает некоторый внешний API (скорее отправляет XHR или работает с хранилищем сеансов или чем-то еще). Так что вам просто нужно смоделировать этот внешний источник и убедиться, что к нему обращались сразу после создания компонента

const fetchUserData = jest.fn();

jest.mock('../api/someApi', () => ({
    fetchUserData,
}));

beforeEach(() => {
    fetchUserData.mockClear();
});

it('calls API on init', () => {
    shallow(<Yourcomp {...propsItNeeds} />);
    expect(fetchUserData).toHaveBeenCalledWith(paramsYouExpect);
});

it('does something if API call fails', () => {
    fetchUserData.mockRejectedValue();
    const wrapper = shallow(<Yourcomp {...propsItNeeds} />);
    expect(wrapper.find(ErrorMessage).props().children).toEqual('Failed to load. Try again');
    // or even
    expect(wrapper).toMatchSnapshot();
});

Таким образом, вы действительно проверяете, если 1. внешний API был вызван для компонента init 2. API был вызван с ожидаемыми параметрами 3. компонент знает, что делать в случае сбоя вызова API 4. ...

И наоборот, проверка того, был ли вызван метод this.getUserData в cDM, не гарантирует ни один из пунктов выше. Что если this.getUserData сам по себе не вызывает API? Что делать, если сбой API там не обрабатывается должным образом? Мы все еще не уверены в этом.