userEvent.type gets only last letter on v12.0.9

• @testing-library/user-event version: 12.0.9
• Testing Framework and version: jest@26.0.1
• DOM Environment: jsdom@16.2.2, jest-environment-jsdom@26.1.0
• node@12.14.0

Relevant code or config

name-edit.js

import React from 'react';

export const NameEdit = () => {
  const [userName, setUserName] = React.useState('');

  return (
    <input value={userName} onChange={(e) => setUserName(e.target.value)} />
  );
};

name-edit.spec.js

import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { NameEdit } from './name-edit';

describe('NameEdit component specs', () => {
  it('should update value when input changes', () => {
    // Arrange

    // Act
    render(<NameEdit />);

    const inputElement = screen.getByRole('textbox', {
      name: '',
    });

    userEvent.type(inputElement, 'John');

    // Assert
    expect(inputElement.value).toEqual('John');
  });
});

What happened:

Since I update to v12.0.9 this spec fails because it gets only last letter.

It’s working on v12.0.8

Reproduction repository:

Sandbox with v12.0.9: https://codesandbox.io/s/quizzical-surf-wpkq1 Sandbox with v12.0.8: https://codesandbox.io/s/eager-lamport-2hwhb

[mavv-coder]

I am still suffering this error while testing next component:

import React from 'react';
import { useField } from 'formik';
import MuiTextArea, { TextFieldProps } from '@material-ui/core/TextField';

export const TextAreaComponent: React.FunctionComponent<TextFieldProps> = props => {
  const [field, meta] = useField(props.name);
  const textAreaProps = Boolean(field) ? field : props;
  const hasError = Boolean(meta && meta.touched && meta.error);

  return (
    <MuiTextArea
      {...props}
      name={textAreaProps.name}
      onChange={textAreaProps.onChange}
      onBlur={textAreaProps.onBlur}
      value={textAreaProps.value ?? ''}
      multiline={true}
      type={'TextareaAutosize'}
      variant={'standard'}
      error={hasError}
      helperText={hasError ? meta.error : ''}
    />
  );
};

Using this test:

import React from 'react';
import { Formik, Form } from 'formik';
import { render, screen, act } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { TextAreaComponent } from './textArea-field.component';

describe('textfield component specs', () => {
  const renderWithFormik = (component, initialValues) => ({
    ...render(
      <Formik initialValues={initialValues} onSubmit={console.log}>
        {() => <Form>{component}</Form>}
      </Formik>
    ),
  });

 it('"input" should change value when typing', () => {
    // Arrange

    // Act
    renderWithFormik(<TextAreaComponent name={name} />, { name: 'test name' });

    const textarea = screen.getByRole('textbox') as HTMLInputElement;

    userEvent.type(textarea, 'test input text');
    
    // Assert
    expect(textarea.value).toEqual('test input text');
  });
});

The test doesn’t pass because expect receives ‘est input textt’ instead of ‘test input text’. If I use act function to wrap userEvent expect only receives the last letter.

What’s going on here? Does anyone know the solution to this?

---

• node: v12.18.2
• @testing-library/jest-dom: “^4.2.4”
• @testing-library/react: “^9.3.2”
• @testing-library/user-event: “^12.1.10”
• jest: “^24.9.0”
• @types/jest: “^24.0.23”,

[wangxx1412]

Hi guys, I have a similar issue with userEvent.type, is only typed the first letter of the string. Does anyone have idea about this weird behavior?

 const emailInput = getByTestId(container, "login-form-email");

 userEvent.type(emailInput,`[e-mail]`)

 expect(emailInput).toHaveValue('[e-mail]' );

Terminal:

Expected the element to have value:
  [e-mail]
Received:
  E