userEvent.type with empty string causes a warning about an unhandled promise rejection

[InExtremaRes]

• @testing-library/user-event version: 13.0.16

• Testing Framework and version: jest 26.6.0 (create-react-app)
• DOM Environment:
  • jsdom: 16.5.2
  • jest-environment-jsdom: 26.6.2

Relevant code or config

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

test('user event empty text', async () => {
  render(
    <>
      <label htmlFor='input'>Input</label>
      <input id='input' />
    </>,
  );

  userEvent.type(screen.getByLabelText('Input'), '');
});

What you did:

I used userEvent.type with an empty string.

What happened:

Running the tests with jest (npm test, is a CRA project) causes node.js to emit this warning:

(node:48415) UnhandledPromiseRejectionWarning: Error: Expected key descriptor but found "undefined" in ""

Tested with node.js 12.21.0 and 14.16.0.

The warning seems to be an unhandled rejected promise, so an actual error was thrown.

The warning was not emitted using user-event 12 (the default that came with CRA).

[ph-fritsche]

Thanks for this report.
We want to catch all promise rejections in the synchronous variants of type and keyboard and report per error console. I'll fix this.

Regarding the empty string: What's the purpose of using type with an empty string?
I tend towards classifying reporting an error there as intended behavior.

[github-actions]

🎉 This issue has been resolved in version 13.1.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[ph-fritsche]

The UnhandledPromiseRejectionWarning is fixed. You should get a console error now.

I closed this issue for now.
Please provide the use case for that empty text input. If that use case is valid, I'll gladly reopen :)

[ph-fritsche]

@all-contributors add @InExtremaRes bug

[allcontributors]

@ph-fritsche

I've put up a pull request to add @InExtremaRes! 🎉

[InExtremaRes]

@ph-fritsche I caught this error in a suite that tested input validation. There was a set of strings to be used as inputs and the expected messages the use would see, something like this:

[
  ['abc', 'Too short'],
  ['&ab', 'No symbols allowed'],
  ['', 'Required'], // <-----------
 // ... an so on...
]

The input field is required so clicking it and leave it empty should mark it as such.

I understand this can be accomplish but other means, like userType.click then validate without typing. In fact, after see the error just reported I change the code to filter out falsy input values.

However I don't see why passing an empty string is an error. As I said I expected such behaviour to be equivalent to click the input and then do nothing. Besides, the error is very cryptic, I thought "what key descriptor are you talking about?", I didn't realize until I saw your PR. Is that error really expected even if I never used { o [?

[ph-fritsche]

The error is meant for every input that can not be converted to a key definition. Which is the case for an empty string.
(We might be able to improve it by adding a link to that part of the README though.)

I'm not sure yet if it would be a good idea to skip the implementation right away if the string is empty.
Calling type or keyboard with an empty input string might be a mistake that we want to flag as there is no real reason to call it with an empty string.

[InExtremaRes]

I agree that my case is a not very compelling reason to allow an empty string, but maybe the message can be improved. It took me a while to realize where the error came from.

[GentlemanHal]

For what it's worth we had the exact same set up and issue as @InExtremaRes, so maybe it isn't that unusual?

[zaicevas]

I can back this up. We had this issue and it took some time to find out why and where the error is reported. A better error message would help A LOT.

[ph-fritsche]

@zaicevas @InExtremaRes Please have a look at #666

[github-actions]

🎉 This issue has been resolved in version 13.1.6 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[vincentvdzee]

How did you solve validating your input field for falsey values like an empty string? You mentioned something about userEvent.click?

[ph-fritsche]

How did you solve validating your input field for falsey values like an empty string? You mentioned something about userEvent.click?

He initially expected userEvent.type(element, '') to click the element and then do nothing. Which throws an error because the empty string does not translate to a keyboard input - and which could just be performed per userEvent.click(element).

[JohnAlbin]

FYI, I had the same problem. Thanks for the info.

In my case, I had a helper function that passed the text as a variable to the type method; e.g. userEvent.type(element, text)

I solved this by modifying my code to type a TAB character if the given string was empty.
userEvent.type(element, text || '{tab}')

And that worked great because it removed focus from the element (and then triggered the "required" error message on my form.)

[tylercollier]

Here's what I did:

import { fireEvent } from '@testing-library/react';

const setInputToBlank = (input) => fireEvent.input(input, { target: { value: '' } });

// Then call in your test like this:
const emailInput = screen.getByLabelText(/email address/i);
await setInputToBlank(emailInput);