Testing window resize handler on React.Component with Jest & Enzyme

Question

I'm writing a component that applies some logic on 'resize' event. It basically looks like this:

class MyComponent extends React.Component {
    componentDidMount() {
        window.addEventListener('resize', this.handleWindowResize);
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.handleWindowResize);
    }

    handleWindowResize = () => console.log('handleWindowResize');
}

The test looks like this:

it(`should do some stuff on window resize event`, () => {
    const wrapper = mount(<MyComponent />);

    const spy = jest.spyOn(wrapper.instance(), 'handleWindowResize');
    wrapper.update();

    global.dispatchEvent(new Event('resize'));

    expect(spy).toHaveBeenCalled();
});

In my test log I get following FAIL:

console.log app/components/MyComponent/index.js:32
  handleWindowResize
console.log app/components/MyComponent/index.js:32
  handleWindowResize
console.log app/components/MyComponent/index.js:32
  handleWindowResize
console.log app/components/MyComponent/index.js:32
  handleWindowResize
console.log app/components/MyComponent/index.js:32
  handleWindowResize

   <CircleGraph /> › should do some stuff on window resize event

    expect(jest.fn()).toHaveBeenCalled()

    Expected mock function to have been called, but it was not called.

      171 |     global.dispatchEvent(new Event('resize'));
      172 | 
    > 173 |     expect(spy).toHaveBeenCalled();
          |                 ^
      174 |   });
      175 | });
      176 | 

So the original function is invoked during the test (function works without a flaw on the original component), but not on the spy. What am I doing wrong?

Using react 16.6.0, jest-cli 23.6.0, enzyme 3.7.0

[UPDATE] I've added tested method to the prototype with this.handleWindowResize.bind(this) in the constructor and wrote my test like that:

  it(`should do some stuff on window resize event`, () => {
    const spy = jest.spyOn(CircleGraph.prototype, 'handleWindowResize');
    const wrapper = shallow(<MyComponent />);

    global.dispatchEvent(new Event('resize'));
    wrapper.unmount();

    expect(spy).toHaveBeenCalled();
  });

and the spy finally called. I'm not exactly sure why though...

Answer 1

I faced a similar issue and had been bothering me for several days.
I wasn't able to solve your new way in my case.

But I found a solution just now (by using your older one).

it(`should do some stuff on window resize event`, () => {
    const wrapper = mount(<MyComponent />);
    const spy = jest.spyOn(wrapper.instance(), 'handleWindowResize');

    // set spy to 'resize' listener
    global.addEventListener('resize', spy);
    global.dispatchEvent(new Event('resize'));

    expect(spy).toHaveBeenCalled();
});