Dom-testing-library: Utilities for dispatching events?

[kentcdodds]

I'm thinking there could be room for a utility for dispatching events in elements. Similar to react's test utils Simulate utilities except with actual browser events. What should the API look like?

[gnapse]

How about keeping it similar to react-dom's Simulate:

simulate.click(getByTestId('submit-button'))

// or even keep it capitalized
Simulate.change(
  document.querySelector('input[name="username"]'),
  { target: { name: 'username', value: '1234' } },
)

It could also be a single function, and the event type as parameter:

simulate('click', getByTestId('submit-button'))

Though I'd prefer the former option.

[kentcdodds]

I also prefer the former option. But let's call it fireEvent rather than Simulate:

fireEvent.click(domNode)
// the `change` event in react is actually the `input` event.
// the actual change event only fires on blur for inputs
// https://developer.mozilla.org/en-US/docs/Web/Events/change
// https://developer.mozilla.org/en-US/docs/Web/Events/input
// we'll need to document this in react-testing-library with big bold letters.
fireEvent.input(
  document.querySelector('input[name="username"]'),
  {target: {name: 'username', value: '1234'}}
)

If we can find a module with list of all events that would be super. Then we could use that to generate these.

Alternatively, we could use a Proxy, which would probably be really handy. That actually could be preferable... 🤔

[antsmartian]

Hey @kentcdodds, this is something I'm using for preact test library:

const FireEvent = {
  fireEvent: (element, type) => {
    const e = document.createEvent('Event')
    e.initEvent(type)
    element.dispatchEvent(e)
  },
}

found it working in most of the cases. Also if we want to extend supporting bubbles, cancellable, we can make use of initEvent as they accept these two as arguments.

But again, as discussed in twitter, it might not serve all the purposes.

[kentcdodds]

Thanks @antoaravinth. That wont quite be enough because it doesn't allow you to specify custom options (as in the fireEvent.input call.

[jomaxx]

@kentcdodds so funny story. i literally worked on a similar library last week and just found out about your project https://github.com/jomaxx/react-dom-test-env. I have a simulate utility that I started which does real DOM events with some sane defaults https://github.com/jomaxx/react-dom-test-env/blob/master/src/simulate.js. I'm happy to contribute it to this project.

I also have a debug helper that pretty prints a dom tree in an error message https://github.com/jomaxx/react-dom-test-env/blob/master/src/debug.js

let me know if i can help

[kentcdodds]

Oh hey! That's so cool @jomaxx! I'd love to join forces! How would you like to make a PR that adds your simulate functionality to this library? I think it'll need a few changes (change it from simulate to fireEvent and allow for passing additional properties for the event), but it's pretty close to what I was hoping for!

About the debug helper, @antoaravinth is working on adding that by default for errors in #3. I'm thinking that'll probably be enough for now. Thanks so much! This is great!

It's validating to me that you were working on something similar recently @jomaxx! I hope we can work together to make testing React (and DOM related stuff in general) really awesome!

[jomaxx]

@kentcdodds will do!

[igomezal]

Maybe you could also use something like: https://github.com/PolymerElements/iron-test-helpers

[kentcdodds]

I think we're covered. And this was actually addressed and merged so we're good with this issue! Thanks though @igomezal!