Pfthb

Long story short, I have a React app that is importing a vanilla.js component. This component interacts with the DOM outside of the React app, but sometimes the React app needs to use the component. When I try and shallow render the React component that imports the Login component, Jest gets hung up on 'addEventListener' in the vanilla.js Login component:

TypeError: Cannot read property 'addEventListener' of null

 90 | }
 91 |
> 92 | document.querySelector(config.selectors.loginModal).addEventListener('click', (e) => closeLogin(e));
 | ^
 93 | document.querySelector(config.selectors.loginClose).addEventListener('click', (e) => closeLogin(e));
 94 | };

So I have my react app:

import React from 'react';
import Login from '../login';
const Component = () => 
 return (
 <h3>
 <span className='cc-stats-login-btn' onClick=(e) => 
 Login.openRegister(e, 'Statistics')>Register</span>
 or
 <span className='cc-stats-login-btn' onClick=(e) => Login.openLogin(e, 'Statistics')>login</span>
 to view advanced analytics and graphs
 </h3>
 );
;

The test for that app currently looks like:

document.body.innerHTML =
 '<div class="login-modal-bg">' +
 ' <div class="login-modal-close"></div>' +
 '</div>';

describe('<Component />', () => 
 test('renders', () => 
 const wrapper = shallow(
 <Component />
 );
 expect(wrapper.exists()).toBe(true);
 );
);

The js for the login component that Jest seems to be failing on:

const Login = (() => 
 const config = 
 selectors: 
 loginModal: '.login-modal-bg',
 loginClose: '.login-modal-close'
 
 ;

 [...]

 const initialize = () => 
 document.querySelector(config.selectors.loginModal).addEventListener('click', (e) => closeLogin(e));
 document.querySelector(config.selectors.loginClose).addEventListener('click', (e) => closeLogin(e));
 ;
;

As far as I can tell based on Jest docs, all I need is a simple string as a 'mock dom' and the addEventListener should work. But all I get is the above TypeError. Any ideas?

Testing against DOM (it isn't real in Jest because it uses JSDOM) in unit tests provides additional moving parts. document.querySelector can be mocked instead:

const loginModalMock = jest.fn();
const loginCloseMock = jest.fn();

jest.spyOn(document, 'querySelector')
.mockReturnValue()
.mockReturnValueOnce( addEventListener: loginModalMock )
.mockReturnValueOnce( addEventListener: loginCloseMock )

const wrapper = shallow(
 <Component />
);

...

In this specific case document.querySelector is used not in tested module. The module that uses it can be mocked at the top of test file:

jest.mock('.../login', () => ( openLogin: jest.fn() ));