Jest Cannot read property 'createEvent' of null

[nicholaai]

Hi. The polyfill itself performs as expected, though in testing i sometimes run into the following issue.

(For reference i'm using React, Styled-Components, Jest, Enzyme, Babel)

In Dropdown, I import my Details component, which has import 'details-element-polyfill'';. Then in testing, I sometimes then get the following error.

FAIL src/Dropdown/Dropdown.test.js
● Test suite failed to run

TypeError: Cannot read property 'createEvent' of null

   5 | import { eventIsSignificant, findClosestElementWithTagName, getRenderer } from './utils';
   6 | import { keyCodes } from '../utils';
>  7 | import 'details-element-polyfill';
     | ^
   8 | 
   9 | const DetailsReset = styled.details`
  10 |   & > summary {

  at triggerToggle (../node_modules/details-element-polyfill/dist/details-element-polyfill.js:205:26)
  at HTMLDetailsElement.value (../node_modules/details-element-polyfill/dist/details-element-polyfill.js:77:15)
  at HTMLDetailsElement.set [as open] (../node_modules/details-element-polyfill/dist/details-element-polyfill.js:57:33)
  at elementExpands (../node_modules/details-element-polyfill/dist/details-element-polyfill.js:17:18)
  at ../node_modules/details-element-polyfill/dist/details-element-polyfill.js:11:32
  at Object.<anonymous> (../node_modules/details-element-polyfill/dist/details-element-polyfill.js:229:3)
  at Object.<anonymous> (Details/Details.js:7:1)
  at Object.<anonymous> (Dropdown/Dropdown.js:5:1)
  at Object.<anonymous> (Dropdown/Dropdown.test.js:5:1)

I found createEvent is used in

function triggerToggle(element) {
    var event = document.createEvent('Event');
    event.initEvent('toggle', false, false);
    element.dispatchEvent(event);
  }

My setup-tests is

import enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import 'jest-styled-components';
import { create as render } from 'react-test-renderer';

enzyme.configure({ adapter: new Adapter() });

export default el => render(el).toJSON();

My jest config

{
    "testEnvironment": "jsdom",
    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
    "moduleFileExtensions": ["js", "jsx", "json", "node"],
    "setupFilesAfterEnv": [
      "<rootDir>/src/setup-tests.js"
    ]
  }

my test command (note env jsdom is enabled by default and i think it should provide access to document but it fails here)

"test": "jest --config jestconfig.json --env=jsdom",

I've tried adding the polyfill file to my jestconfig like this:

"setupFiles": ["details-element-polyfill"],

I've tried setting up a document in setup-tests.js like so:

import { JSDOM } from 'jsdom';

const dom = new JSDOM();
global.document = dom.window.document;
global.window = dom.window;

and i've tried adding globals to jest as well via

        "globals": {
          "window": {},
          "document": {}
        }

Any idea how i can solve this problem? Thanks

@javan

[nicholaai]

figured this out. had to create a jest mock for testing. for anyone in the future, create a mocks folder adjacent to your node_modules folder like so:

project/__mocks__/details-element-polyfill.js

then create a mock within:

export default jest.mock('details-element-polyfill', () => () => 'mock result');

jest should use this instead of the polyfill. gl!