User-event: The type event doesn't work on elements without a value property

[sarahdayan]

• @testing-library/user-event version: 12.1.10
• Testing Framework and version: jest 24.1.0
• DOM Environment: react-dom 16.13.1

Relevant code or config

import React from 'react'
import '@testing-library/jest-dom'
import userEvent from '@testing-library/user-event'
import {render, screen} from '@testing-library/react'
import {useHotkeys} from 'react-hotkeys-hook'

function Counter() {
  const [count, setCount] = React.useState(0)
  useHotkeys('ctrl+k', () => setCount(prevCount => prevCount + 1))

  return <>Pressed {count} times.</>
}

test('increment counter', async () => {
  render(<Counter />)
  const count = screen.getByText('Pressed 0 times.')
  userEvent.type(document.body, '{ctrl}k{/ctrl}')

  expect(count).toHaveTextContent('Pressed 1 times.')
})

Reproduction repository

https://codesandbox.io/s/blissful-waterfall-p4fi4?file=/src/index.test.js

Problem description

The library doesn't seem to support the type event on elements that don't have a value property. This prevents testing scenarios with global keyboard shortcuts that trigger effects. For instance, in the above sandbox, we increment the counter when hitting ctrl+k (bound to document.body) as you can see in the Browser tab (make sure the document is focused).

However, the test using userEvent.type doesn't pass (see Tests tab). It does with fireEvent.keyDown.

Is it in the vision of user-event to support this, or should it remain a fireEvent scenario? And if the latter, what is the rationale?

[kentcdodds]

I think we should support type on non-value elements 👍

[sarahdayan]

Yay! Is there context on why it's currently unsupported? The change _looks_ trivial but if I go there I'd like to make sure I'm not missing something.

[kentcdodds]

I can't remember 😅 so I guess we can just go forward.

[sethreidnz]

I've been looking for somewhere to make a contrib to one of these @testing-library packages and this looks good! I understand the problem, and I'm starting to get my head around how the code works and how to contribute... Is anyone else working on this or if I have time should I get something up?

My understanding of the problem is that right now the current implementation only really handles an as the element we are typing on. But we want to be able to handle the fact that typing is the way the user does hotkeys right?

Let me know if there is anything else I should know. This is my first time trying to contribute to open source so I may be slow to get going :-)

[kentcdodds]

@sethreidnz I don't think anyone's working on it. You can feel free to do so.

I think your understanding is correct. I think the easiest way to approach this would be to add a test that does: userEvent.type(document.body, '{alt}t{/alt}{backspace}{delete}') or something like that. This test will fail and making that test pass will probably be sufficient.

When you're finished, it might make sense to refactor the test into a few separate use cases. Whatever feels right to you is probably fine.

Thanks!

[ph-fritsche]

Resolved in v13.0.0 :rocket:

https://codesandbox.io/s/charming-maxwell-0z65j?file=/src/counter.js

The useHotkeys hook still fails because it relies on the deprecated keyCode property.
If you want to use it, PRs extending the defaultKeyMap to support this for legacy code are welcome. :)