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

admin管理员组

文章数量:1334800

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.

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.

• javascript
• events
• jestjs
• react-testing-library
• jsdom

Share Improve this question Follow edited Oct 21, 2020 at 22:02 tim-mccurrach asked Oct 21, 2020 at 12:08 tim-mccurrachtim-mccurrach 6,84544 gold badges2727 silver badges4343 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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 ponent—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)
})

本文标签： javascriptpass custom event properties with fireEvent (testinglibrary and jest)Stack Overflow