Rmwc: Issue mounting with Enzyme

[slipo]

I get the following error when mount()ing components with enzyme:
TypeError: Cannot set property dataset of [object HTMLElement] which has only a getter

It seem to happen if the component contains any elements like Button and Textfield. Is there something I need to wrap the elements with in my tests or something along those lines?

[jamesmfriedman]

I need to add this to the documentation. Look in src/setupTests.js and you’ll see how to add dataset to the JSdom HTMLElement prototype

[slipo]

I'm still getting TypeError: Cannot set property dataset of [object HTMLElement] which has only a getter even copying and pasting that js file into my project. Any ideas?

[jamesmfriedman]

I'd need to know more about your particular testing setup. Your specific error there seems to be that HTMLElement is a sealed / immutable type object.

Is there any chance you can put together a repro case on this? I'd love to ensure a fix and get it documented appropriately. I did have the same issue with RMWC tests, but it was resolved with this particular fix so I'm not sure why it's not working for you. Maybe a version difference?

[slipo]

Perhaps it's an issue with use strict and env + babel?

If I install transform-remove-strict-mode I can run this
window.HTMLElement.prototype.dataset = {}

However the mount still fails. So perhaps use strict is still in the enzyme code.

[jamesmfriedman]

Can you make a repro case? I had this exact issue and it was resolved with this fix.

[jamesmfriedman]

@slipo any word on this? A repro case would help troubleshoot this quickly.

[slipo]

Here's a branch with a failing test
https://github.com/slipo/NeoLink/tree/rmwc-repro

You should just be able to run

npm install
npm test

Here's the failure point
https://github.com/slipo/NeoLink/blob/rmwc-repro/__tests__/components/AddCustomNetwork.test.js#L8

Like I said above, I tried your setupTests.js from this project with no luck. The transform-remove-strict-mode project got me closer, in terms of setupTests.js actually running, but errors inside the rmwc components persisted.

[jamesmfriedman]

@slipo , Got it :). Same problem, just used Object.defineProperty to get around sealed objects. I don't think you have to do the remove strict plugin... I'll update the docs for the next release.

import 'raf/polyfill'
import { configure } from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

configure({ adapter: new Adapter() })

Object.defineProperty(window.HTMLElement.prototype, 'dataset', {
  writable: true,
  value: {},
})

Object.defineProperty(window.HTMLInputElement.prototype, 'validity', {
  writable: true,
  value: {},
})

[jamesmfriedman]

Just added a little bonus for the next release, a simple function you run to polyfill the stuff MDC needs for JSDom.

[slipo]

Thank you. Working now. Wrote a bunch of tests just now.

[jamesmfriedman]

Awesome @slipo. Thanks for the repro case on this one. Closing this now, just let me know if that polyfill actually worked.

[cdhandapani-mdsol]

hi, can i know what actually solved the issue?

[jamesmfriedman]

There are a variety of things that mdc does that require properties that are avaialable in real browser but not in JSDOM. This polyfill simply makes sure these things are available in your testing environment.