Testing v1 with Jest

[izakfilmalter]

Have the following issues with my test with v1:

console.warn node_modules/rmwc/Base/withMDC.js:129
      MDCTextField failed to initialize because of the following error: TypeError: Cannot read property 'badInput' of undefined
          at MDCTextFieldFoundation.isBadInput_

[jamesmfriedman]

Thats a strange one. CircleCI isn't failing on it. Have you tried removing and reinstalling your node_modules? Remember when you do that you have to also install peerDependencies manually.

[izakfilmalter]

Cleared out node_modules. Reinstalled, still get the same issue. It's only a warning, so my tests pass, but it is super annoying.

[jamesmfriedman]

Can you get together a repro case, or at least post the code from the test?

[izakfilmalter]

Here's a repo with a repro. lol. Seems like the error is related to setting state when the component received props.

https://github.com/izakfilmalter/rmwc-jest

[jamesmfriedman]

Found and fixed the issue :).

It's the same problem as the dataset issue. When using the full mount API, enzyme tries to recreate the full DOM with JSDom, and MDCs full javascript code will run. Since the DOM is infinitely complex, a lot of features are missing or incorrect.

In a real DOM, HTMLInput.validity is always available. In JSDom, it's undefined. Same thing with HTMLElement.dataset.

Change your setupTests file to this, and I'll add it into the documentation.

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import 'babel-polyfill';

// Add these two lines
window.HTMLElement.prototype.dataset = {};
window.HTMLInputElement.prototype.validity = {};

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

window.matchMedia =
  window.matchMedia ||
  function() {
    return {
      matches: true,
      addListener: function() {},
      removeListener: function() {},
    };
  };

[izakfilmalter]

Cool thanks.