pass custom event properties with fireEvent (testing-library and jest)

Question

What I would like to do

I would like to pass some custom properties to an event during some tests (using react-testing-library and jest). I am using the fireEvent function. I understand from the docs that the properties in the second argument are added to the event. This is what I can't do at the moment.

Minimal reproducible example

import React from 'react'
import { render, fireEvent } from '@testing-library/react'
test('check event', () => {
  const DOM = render(
    <div
      onClick={event => {
        console.log(event.foo)
      }}
    >
      Click Me
    </div>
  )
  
  // here I am expecting foo to be a property on the event passed
  // to the event handler. But that doesn't happen.
  fireEvent.click(DOM.getByText('Click Me'), { foo: 'bar' })
})

The result is that undefined is logged.

Approaches I've tried / thoughts

I have tried various variations of this using different event types, using createEvent, using custom events, manually adding an event listener etc. and I can't seem to access any of the event properties I pass in with any of these variations.

I've looked under the cover a bit at what's going on in fireEvent here. It certainly looks like those additional properties should be added.

Answer 1

The fireEvent function allows initializing intrinsic properties of Event objects, but it doesn't add arbitrary properties. For example, calling

fireEvent.click(DOM.getByText('Click Me'), { button: 2 })

dispatches a MouseEvent with its button property set to 2.

Note that you may want to revisit how you're testing your component—passing custom properties to an event in a test runs counter to the guiding principle of the DOM Testing Library:

The more your tests resemble the way your software is used, the more confidence they can give you.

However, your workflow is technically possible by passing custom properties to the detail property of a CustomEvent. This approach could be feasible depending on your goals, and perhaps in conjunction with an onClick handler. For example, this logs bar:

import React, { useEffect, useRef } from 'react'
import { fireEvent, render } from '@testing-library/react'

test('custom event', () => {
  const MyComponent = ({ customEventHandler, children }) => {
    const ref = useRef(null)

    useEffect(() => {
      ref.current.addEventListener('my-event', customEventHandler)

      return () => {
        ref.current.removeEventListener('my-event', customEventHandler)
      }
    }, [customEventHandler])

    return <div ref={ref}>{children}</div>
  }

  const customEventHandler = (event) => {
    console.log(event.detail.foo)
  }

  const { getByText } = render(
    <MyComponent customEventHandler={customEventHandler}>
      Click Me
    </MyComponent>
  )

  const elem = getByText('Click Me')
  const event = createEvent(
    'my-event',
    elem,
    {
      detail: {
        foo: 'bar',
      },
    },
    { EventType: 'CustomEvent' }
  )

  fireEvent(elem, event)
})