Skip to content

Documentation lacks information on createEvent() #798

Open
@jamiehaywood

Description

@jamiehaywood
  • @testing-library/dom version: latest
  • Testing Framework and version: jest 26.0.0
  • DOM Environment: jsdom latest

Relevant code or config:

import * as React from 'react'
import {render, screen, createEvent, fireEvent, act} from '@testing-library/react'
import {App} from '../index'

test('renders true when event has been fired', async () => {
  render(<App />)

  await act(async () => {
    const event = createEvent('beforeinstallprompt', window, {
      userChoice: new Promise((res) =>
        res({outcome: 'accepted', platform: ''}),
      ),
      prompt: () => new Promise((res) => res(undefined)),
    })
    fireEvent(window, event)
  })

  expect(screen.queryByText(/false/i)).not.toBeInTheDocument()
})
export function App() {
  const [eventHeard, setEventHeard] = useState(false)

  useEffect(() => {
    const evt = (e) => {
      e.preventDefault()
      setEventHeard(true)
    }
    window.addEventListener('beforeinstallprompt', evt)
    return () => window.removeEventListener('beforeinstallprompt', evt)
  })

  return <h1>{JSON.stringify(eventHeard)}</h1>
}

What you did:

I was trying to mock the beforeinstallprompt event using createEvent(). The documentation wasn't very clear as to how I create events, so I took a look at the source and it still wasn't clear to me.

What happened:

Reproduction:

Problem description:

Suggested solution:

Update the documentation with examples of exactly how to create events.

Interim solution:

use Object.defineProperties and assign the properties that you need to the object.

const event = createEvent('beforeinstallprompt', window);

Object.defineProperties(event, {
  userChoice: {
    value: new Promise((res) =>
      res({ outcome: 'accepted', platform: '' })
    ),
  },
  prompt: { value: () => new Promise((res) => res(undefined)) },
});

fireEvent(window, event);

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions