React + enzyme unit tests, can't access window.addEventListener

javascript reactjs unit-testing enzyme jsdom
ajmajmajma picture ajmajmajma · Dec 4, 2017 · Viewed 10.4k times · Source

I have some unit tests set up, testing with enzyme's shallow method with a jsdom configuration. This has been working well until I have run into a component where I am using window.addEventListener. The unit tests is now giving back the error of 

TypeError: window.addEventListener is not a function

I have my test helpers set up for JSdom like so 

import jsdom from 'jsdom';

...

global.document = jsdom.jsdom('<!doctype html><html><body></body></html>');
global.window = document.defaultView;
global.navigator = {userAgent: 'node.js'};

this was working fine, then I upgraded to enzyme 3.x, and now I am getting this error.

I am wondering do i need to manually mock the addEventListener now, or is there something I am doing wrong to access this.

Answer

Parth Navadiya picture Parth Navadiya · Oct 25, 2018 
//in test file ...

    it("should render KeyStrokeHandler", () => {
    // Set-up event listener mock
    const map = {};
    window.addEventListener = jest.fn((event, callback) => {
      map[event] = callback;
    });

    // Mount component that has set callback for keydown event
    const wrapper = mount(<KeyStrokeHandler />);

    // Trigger keydown event
    map.keydown({ key: 'Enter' });
  });

...

Related questions

Figuring out how to mock the window size changing for a react component test

So basically when the component mounts, I have an event listener listen for resize events. It toggles the isMobileView state and then passes it into the children as a prop. So it's imperative that this works and is tested. I'm …

Read More
Check if child component rendered - Jest, Enzyme

In my unit test, I want to test whether the parent component is successfully rendering its child component. Here is the code: describe('Parent Component', () => { it('renders Child component', () => { const wrapper = shallow(<Parent store={store} />); expect(…

Read More
Unit testing React click outside component

Using the code from this answer to solve clicking outside of a component: componentDidMount() { document.addEventListener('mousedown', this.handleClickOutside); } componentWillUnmount() { document.removeEventListener('mousedown', this.handleClickOutside); } setWrapperRef(node) { this.wrapperRef = node; } handleClickOutside(event) { if (this.wrapperRef && !this.wrapperRef.contains(…

Read More