User-event: type event in textarea results in incorrect character order

[willgorham]

• @testing-library/user-event version: 12.0.11
• Testing Framework and version: jest 24.9.0
  
• DOM Environment: jsdom 11.12.0
  

Relevant code or config:

Basic create-react-app (not ejected).

Copied the type example directly from the readme:

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

test('type', () => {
  render(<textarea />)

  userEvent.type(screen.getByRole('textbox'), 'Hello,{enter}World!')
  expect(screen.getByRole('textbox')).toHaveValue('Hello,\nWorld!')
});

What happened:

Running the test produces the following error:

Reproduction repository:

https://github.com/lm1503109/user-event-textarea

Problem description:

The first character of typed input is at the end of the resulting value.

Suggested solution:

[kentcdodds]

Hey there @willgorham,

The issue is there are lots of bugs in the version of jsdom you're using. Try using this: https://www.npmjs.com/package/jest-environment-jsdom-sixteen

There's nothing more we can do to fix this.

[rwalle61]

For anyone hitting this issue in Create React App and unable to override Jest's default jsdom testEnvironment using a jest.config.js, I used this to override it with jsdom-sixteen: https://github.com/facebook/create-react-app/issues/7491#issuecomment-520157683