user-event: userEvent.type with empty string causes a warning about an unhandled promise rejection

@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).

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 2
Comments: 16 (9 by maintainers)

Most upvoted comments

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.)

JohnAlbin on Jun 18, 2022

@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 [?

InExtremaRes on Mar 30, 2021

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).

ph-fritsche on Nov 30, 2021

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);

tylercollier on Jun 16, 2023

@zaicevas @InExtremaRes Please have a look at #666

ph-fritsche on Apr 28, 2021