Search code examples
javascripttestingjsdom

jsdom: dispatchEvent/addEventListener doesn't seem to work


Summary:

I am attempting to test a React component that listens to native DOM events in its componentWillMount.

I'm finding that jsdom (@8.4.0) doesn't work as expected when it comes to dispatching events and adding event listeners.

The simplest bit of code I can extract:

window.addEventListener('click', () => {
  throw new Error("success")
})

const event = new Event('click')
document.dispatchEvent(event)

throw new Error('failure')

This throws "failure".


Context:

At risk of the above being an XY problem, I want to provide more context.

Here is an extracted/simplified version of the component I'm trying to test. You can see it working on Webpackbin.

import React from 'react'

export default class Example extends React.Component {
  constructor() {
    super()
    this._onDocumentClick = this._onDocumentClick.bind(this)
  }

  componentWillMount() {
    this.setState({ clicked: false })
    window.addEventListener('click', this._onDocumentClick)
  }

  _onDocumentClick() {
    const clicked = this.state.clicked || false
    this.setState({ clicked: !clicked })
  }


  render() {
    return <p>{JSON.stringify(this.state.clicked)}</p>
  }
}

Here is the test I'm trying to write.

import React from 'react'
import ReactDOM from 'react-dom'
import { mount } from 'enzyme'

import Example from '../src/example'

describe('test', () => {
  it('test', () => {
    const wrapper = mount(<Example />)

    const event = new Event('click')
    document.dispatchEvent(event)

    // at this point, I expect the component to re-render,
    // with updated state.

    expect(wrapper.text()).to.match(/true/)
  })
})

Just for completeness, here is my test_helper.js which initializes jsdom:

import { jsdom } from 'jsdom'
import chai from 'chai'

const doc = jsdom('<!doctype html><html><body></body></html>')
const win = doc.defaultView

global.document = doc
global.window = win

Object.keys(window).forEach((key) => {
  if (!(key in global)) {
    global[key] = window[key]
  }
})

Reproduction case:

I have a repro case here: https://github.com/jbinto/repro-jsdom-events-not-firing:

git clone https://github.com/jbinto/repro-jsdom-events-not-firing.git
cd repro-jsdom-events-not-firing
npm install
npm test

Solution

  • The problem here was that the jsdom-provided document isn't actually getting used by Enzyme tests.

    Enzyme uses renderIntoDocument from React.TestUtils.

    https://github.com/facebook/react/blob/510155e027d56ce3cf5c890c9939d894528cf007/src/test/ReactTestUtils.js#L85

    {
      renderIntoDocument: function(instance) {
        var div = document.createElement('div');
        // None of our tests actually require attaching the container to the
        // DOM, and doing so creates a mess that we rely on test isolation to
        // clean up, so we're going to stop honoring the name of this method
        // (and probably rename it eventually) if no problems arise.
        // document.documentElement.appendChild(div);
        return ReactDOM.render(instance, div);
      },
    // ...
    }
    

    This means all of our Enzyme tests are not executed against the jsdom-provided document, but instead into a div node detached from any document.

    Enzyme only uses the jsdom-provided document for static methods, e.g. getElementById etc. It is not used to store/operate on DOM elements.

    In order to do these kinds of tests I resorted to actually calling ReactDOM.render, and asserting on the output using DOM methods.