如何测试是否在componentDidMount中调用了方法？

Question

I have following componentDidMount lifecycle:

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

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

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

I want to test in jest/enzyme if componentDidMount ran and if guestUserData was called.

I wrote the following test:

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();
  });

but I have error now:

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

Can somebody advice how to test if method was called in lifecycle and if lifecycle was called itself in one test if possible

Answer 1

Just don't. I believe getUserData is calling some external API(rather sending XHR or working with session storage or whatever). So you just need to mock that external source and verify if it has been accessed right after component is created

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();
});

This way you really test if 1. external API have been called on component init 2. API has been called with expected params 3. component knows what to do if API call fails 4. ...

In contrary checking if method this.getUserData has been called in cDM does not ensure any of items above. What if this.getUserData itself does not call API? what if API failure is not handled properly there? We would still unsure on that.