Enzyme Throws an error if the React Component requires jQuery

Question

I'm trying to test a React Components behavior using Enzyme's describeWithDOM() and mount(). But when the component imports jQuery I get this error:

Error: jQuery requires a window with a document

I know Enzyme uses jsdom under the hood, and I always thought jsdom took care of the window and document. But I can't seem to find how to get these working together.

The test code looks like this:

import chai, {expect} from 'chai';
import Select from './Select';
import React, {createElement} from 'react';
import {describeWithDOM, mount} from 'enzyme';

describe('UI Select', () => {

  //more shallow tests here

  describeWithDOM('User Actions', () => {
    it('Toggles the .ui-options menu on button click', () => {
      const wrapper = mount(<Select {...baseProps} />);
      expect(wrapper.state().open).to.not.be.ok;
      wrapper.find('button').simulate('click');
      expect(wrapper.state().open).to.be.ok;
    });
  });
}

In the buttons onClick method a jquery function is called: $('#inputSelector').focus()

How can I let Enzyme and jsdom use jquery in the tests?

Answer 1

describeWithDOM has been removed in the current version of Enzyme, and instead it is recommended to explicitly initialize global.document and global.window before all of your tests as shown here. I don't use jQuery, but I think this should provide the "window with a document" it is looking for.

The initialization code that Enzyme's own tests use is available in its withDom.js file:

if (!global.document) {
  try {
    const jsdom = require('jsdom').jsdom; // could throw

    const exposedProperties = ['window', 'navigator', 'document'];

    global.document = jsdom('');
    global.window = document.defaultView;
    Object.keys(document.defaultView).forEach((property) => {
      if (typeof global[property] === 'undefined') {
        exposedProperties.push(property);
        global[property] = document.defaultView[property];
      }
    });

    global.navigator = {
      userAgent: 'node.js',
    };
  } catch (e) {
    // jsdom is not supported...
  }
}

They use Mocha's --require option to ensure it executes before any of the tests:

mocha --require withDom.js --compilers js:babel-core/register --recursive test/*.js --reporter dot