如何在 Jest 单元测试中模拟“this”关键字

Question

I need to this code using Jest Unit Testing:

componentDidUpdate(prevProps) {
    if (prevProps.socialMediaId !== this.props.socialMediaId) {
      if (typeof this.window.FB !== 'undefined') {
        this.window.FB.XFBML.parse();
      }
    }
  }

using the test case:

it('should test componentDidUpdate', () => {
    props.socialMediaId = '/old_id/';
    const component = mount(<MyComponent {...props} />);
    this.window.FB = {
      XFBML: {
        parse: () => {}
      }
    };
    props.socialMediaId = '/new_id/';
    component.setProps(props);
    expect(this.window.FB.XFBML.parse).toHaveBeenCalled();
  });

But, I'm getting the error:

TypeError: Cannot read property 'window' of undefined

How to fix this issue with " this " keyword in this case?

Answer 1

Here this.window is component property that is likely used as an abstraction over window global. this inside componentDidUpdate isn't the same object as this inside a test

It can be mocked on component instance:

const component = mount(<MyComponent {...props} />);
component.instance().window = { FB: {
  XFBML: {
    parse: jest.fn()
  }
} };

As a rule of thumb, all no-op functions should be Jest stubs for testability purposes, so their calls could be asserted later if needed.