Dom-testing-library: fireEvent is not working on IE

[ysgk]

• react-testing-library version: 9.4.0
• react version: 16.12.0
• dom-testing-library veresion: 6.11.0
• node version: 12.14.0
• npm (or yarn) version: [email protected]

Relevant code or config:

// karma-entry.js
import 'core-js/stable'

const testsContext = require.context('./src/', true, /.*spec\.js$/)

testsContext.keys().forEach(testsContext)

// https://developer.mozilla.org/en-US/docs/Web/API/Element/matches#polyfill
if (!Element.prototype.matches) {
  Element.prototype.matches = Element.prototype.msMatchesSelector
}

// src/index.spec.js
import { render, fireEvent } from '@testing-library/react'
import React from 'react'

const Comp = () => {
  return (
    <button role="button">Click</button>
  )
}

it('turns on', () => {
  const { getByRole } = render(<Comp />)
  fireEvent.click(getByRole('button'))
})

What you did:

I tried to run component specs that use fireEvent on real browsers using karma.

What happened:

IE tests failed: TypeError: Object doesn't support this action.
This is because dom-testing-library uses new Event syntax, which is not suppored by IE.

Error log

    TypeError: Object doesn't support this action
    error properties: Object({ number: -2146827843 })
        at <Jasmine>
       at createEvent[key] (eval code:1988:5)
       at fireEvent[key] (eval code:1992:5)
       at Anonymous function (eval code:494:7)
       at batchedUpdates$1 (eval code:24386:5)
       at act (eval code:1092:5)
       at fireEvent[key] (eval code:493:5)
       at Anonymous function (eval code:18:3)
        at <Jasmine>

Reproduction:

I created a repo: https://github.com/ysgk/ie-fire-event-repro/commit/0431fde8e6941feff58f1b35751210d412e78fd1/checks?check_suite_id=379508051

Problem description:

fireEvent fails on IE because several constructor APIs are not supported.
(Actually, polyfilling Element.prototype.matches was also needed to run specs but that was not a big problem.)

Suggested solution:

Handle events appropriately so that they work on IE.

[kentcdodds]

I don't think we're actively doing anything to support IE (you need to bring your own polyfills), but if it's not something that can be fixed with a polyfill, then we can do something to make it work. Which version of IE is this? I don't think I want to bother supporting anything older than IE10.

What do you suggest we do to fix this?

[kentcdodds]

:tada: This issue has been resolved in version 6.12.2 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[ysgk]

Thank you, I confirmed it's working fine on IE. I really appreciate it.