Firing {delete} or {backspace} in situations that have no input text string

[louh]

• @testing-library/user-event version: 12.2.2
• Testing Framework and version:
  • [email protected]
  • @testing-library/[email protected]
• DOM Environment:
  • [email protected]

Relevant code or config

// Example test - not production quality but enough to show intent
/* eslint-env jest */
import React from 'react'
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import FooComponent from '../FooComponent'
import { handleDeleteFoo } from '../store/actions/foo'

it('calls a function when the delete key is pressed while a component is active', () => {
  render(<FooComponent />)

  // Clicking on this component makes it active
  userEvent.click(screen.getByTestId('foo-component'))

  // Once active, listen for a "delete" key to be pressed
  userEvent.type(screen.getByTestId('foo-component'), '{del}')

  expect(handleDeleteFoo).toBeCalled()
})

What you did:

Our code has a test that is similar to the example above. We are in the process of porting from fireEvent (imported from @testing-library/react) to userEvent from this library.

Previous, working test code would have only one different line. In place of the line starting with userEvent:

  fireEvent.keyDown(screen.getByTestId('foo-component'), { key: 'Delete' })

We are updating our tests in accordance with the best practices post here.

What happened:

The test throws an error:

TypeError: Cannot read property 'length' of undefined

The trace log shows the error thrown inside the calculateNewDeleteValue() function of this library:

      at calculateNewDeleteValue (node_modules/@testing-library/user-event/dist/type.js:444:41)
      at handleDel (node_modules/@testing-library/user-event/dist/type.js:619:33)
      at node_modules/@testing-library/user-event/dist/type.js:148:29

Reproduction repository:

I believe I can describe the problem and solution without a reproduction repository, but I am happy to provide one if it will help.

Problem description:

The implementation of userEvent.type(element, '{del}') appears to assume that the user will only ever press the Delete or Backspace keys inside of a text input element, so it attempts to read from a text string and returns a new text string.

However, our situation is one where the Delete or Backspace keys is used as a hotkey for a user interface element which is not a text input element. The idea is that people can click on various items (its construction doesn't really matter, imagine a list of divs). The application state "knows" this is the active "selected" item. When a user presses backspace or delete while this item is active, we trigger other logic that removes the item from the list.

This use case appears to not be covered with userEvent.type(element, '{del}').

Suggested solution:

I can think of three options from here:

1. Do nothing. We continue to use fireEvent in this case, adding code comments to explain why userEvent is not the appropriate solution for this test.
2. Update userEvent to handle cases where Delete or Backspace is pressed on elements that are not user-input elements.
3. It's possible there is another preferred solution that we should be aware of, which already covers this use case. If that's so, please let me know!

[louh]

Possibly related: #481?

[marcosvega91]

Hi @louh yes I think that they are related. It will be a good feature to add

[ph-fritsche]

Resolved in v13.0.0 🚀

Please use the new userEvent.keyboard API to fire keyboard events on any input.