Trouble with Enzyme & Jsdom in React Component Tests

[sebastiansandqvist]

Enzyme + mocha-jsdom appear to be very fragile when used together. Issues related to that combination of libraries have come up in several of the tests. Usually the workarounds are not too bad, but I would like to look into a way of fixing such issues.

One error occurs when attempting something like this:

describe('Modal', () => {
  jsdom();

  it('Renders', () => {
    const wrapper = mount(<Modal />);
    expect(wrapper.exists()).to.equal(true);
    wrapper.unmount(); // <-- without this line, the test works
  });

This is the worst of the errors, because it means anything that happens in the unmounting lifecycle methods can't be tested. It should work, but during the unmount process we get this error:

Invariant Violation: dangerouslyReplaceNodeWithMarkup(...): Cannot render markup in a worker thread. Make sure `window` and `document` are available globally before requiring React when unit testing or use ReactDOMServer.renderToString() for server rendering.

[sebastiansandqvist]

We might migrate over to Jest since that is what is being setup on Crystal