How to use Popper.js in Jest / JSDOM?

CodePen demo

https://codepen.io/pen?template=wGqJEz

Steps to reproduce the problem

1. Run UI tests with jsdom
2. Get exception TypeError: document.createRange is not a function

What is the expected behavior?

Not to get an exception

What went wrong?

Obviously this is not popper’s fault, but maybe it can be fixed here.

Any other comments?

Thanks for the awesome library, I hope this doesn’t come across as disrespectful. The jsdom issue gives the feeling that this won’t implemented anytime soon. I would like to know more about why createRange is used and can we replace it with something else or fall back to another solution if the browser doesn’t support it.

Browsers newer than IE8 already support this so I can’t find another use case other than testing with jsdom.

[jptissot]

I was having the same issue with enzyme mount() and mocking did not work. However, adding this to my setupTests.js file made everything work.

// setup file
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

if (global.document) {
  document.createRange = () => ({
    setStart: () => {},
    setEnd: () => {},
    commonAncestorContainer: {
      nodeName: 'BODY',
      ownerDocument: document,
    },
  });
}

[brentertz]

Just to close the loop on this…

I also discovered that following works and may be more desirable for some folks.

Create a folder/file called __mocks__/popper.js.js adjacent to your node_modules directory containing the following code. Jest will pick it up automatically.

import PopperJs from 'popper.js';

export default class Popper {
  static placements = PopperJs.placements;

  constructor() {
    return {
      destroy: () => {},
      scheduleUpdate: () => {}
    };
  }
}