user-event (version 13.5.0) doesn't understand{{{arrowleft} correctly

[kumachan-mis]

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

• Testing Framework and version: jest (version 27.3.1)
• DOM Environment: Google Chrome (version 95.0.4638.54). The test runs in CodeSandbox

Relevant code or config

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

const TestComponent = () => {
  const [text, setText] = React.useState("");
  return (
    <div>
      <textarea
        data-testid="test-textarea"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <div data-testid="test-div">{text}</div>
    </div>
  );
};


it("bug?", () => {
  render(<TestComponent />);
  const textareaEl = screen.getByTestId("test-textarea");
  userEvent.type(textareaEl, "{{{arrowleft}.");

  const divEl = screen.getByTestId("test-div");
  expect(divEl.textContent).toBe(".{");
});

What you did:
I run the test above.

What happened:
The test (named "bug?") unexpectedly shows FAIL in user-event (version 13.5.0),
though it shows PASS in user-event (version 13.4.2)

Here is the error in CodeSandbox's console

Error: Expected key descriptor but found "{" in "{{{arrowleft}."
    See https://github.com/testing-library/user-event/blob/main/README.md#keyboardtext-options

    for more information about how userEvent parses your input.

    at assertDescriptor (https://hf9ft.csb.app/node_modules/@testing-library/user-event/dist/keyboard/getNextKeyDef.js:140:11)

    at readTag (https://hf9ft.csb.app/node_modules/@testing-library/user-event/dist/keyboard/getNextKeyDef.js:115:3)

    at readNextDescriptor (https://hf9ft.csb.app/node_modules/@testing-library/user-event/dist/keyboard/getNextKeyDef.js:92:54)

    at getNextKeyDef (https://hf9ft.csb.app/node_modules/@testing-library/user-event/dist/keyboard/getNextKeyDef.js:53:7)

    at keyboardImplementation (https://hf9ft.csb.app/node_modules/@testing-library/user-event/dist/keyboard/keyboardImplementation.js:38:106)

    at keyboardImplementationWrapper (https://hf9ft.csb.app/node_modules/@testing-library/user-event/dist/keyboard/index.js:55:65)

    at typeImplementation (https://hf9ft.csb.app/node_modules/@testing-library/user-event/dist/type/typeImplementation.js:49:51)

    at Object.type (https://hf9ft.csb.app/node_modules/@testing-library/user-event/dist/type/index.js:27:60)

    at Object.eval (https://hf9ft.csb.app/index.test.js:62:23)

    at https://codesandbox.io/static/js/3.c68bd71c0.chunk.js:1:336366

    at new Promise (<anonymous>)

    at t.callAsyncFn (https://codesandbox.io/static/js/3.c68bd71c0.chunk.js:1:336025)

    at https://codesandbox.io/static/js/7.a1fbf49ba.chunk.js:1:6524

    at c (https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.bcc15d438.chunk.js:1:3629)

    at Generator._invoke (https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.bcc15d438.chunk.js:1:3382)

    at Generator.forEach.t.<computed> [as next] (https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.bcc15d438.chunk.js:1:3986)

    at r (https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.bcc15d438.chunk.js:1:206)

    at u (https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.bcc15d438.chunk.js:1:417)

    at https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.bcc15d438.chunk.js:1:476

    at new Promise (<anonymous>)

    at https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.bcc15d438.chunk.js:1:357

    at https://codesandbox.io/static/js/7.a1fbf49ba.chunk.js:1:6791

    at https://codesandbox.io/static/js/7.a1fbf49ba.chunk.js:1:5456

    at c (https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.bcc15d438.chunk.js:1:3629)

    at Generator._invoke (https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.bcc15d438.chunk.js:1:3382)

    at Generator.forEach.t.<computed> [as next] (https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.bcc15d438.chunk.js:1:3986)

    at r (https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.bcc15d438.chunk.js:1:206)

    at u (https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.bcc15d438.chunk.js:1:417)

    at https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.bcc15d438.chunk.js:1:476

    at new Promise (<anonymous>)

    at https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.bcc15d438.chunk.js:1:357

    at https://codesandbox.io/static/js/7.a1fbf49ba.chunk.js:1:5814

    at https://codesandbox.io/static/js/7.a1fbf49ba.chunk.js:1:4116

    at c (https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.bcc15d438.chunk.js:1:3629)

    at Generator._invoke (https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.bcc15d438.chunk.js:1:3382)

    at Generator.forEach.t.<computed> [as next] (https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.bcc15d438.chunk.js:1:3986)

    at r (https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.bcc15d438.chunk.js:1:206)

    at u (https://codesandbox.io/static/js/vendors~app~embed~sandbox~sandbox-startup.bcc15d438.chunk.js:1:417)

Reproduction repository:
URLs of CodeSandbox

• user-event (version 13.4.2) https://codesandbox.io/s/user-event-13-4-2-9lyfo?file=/index.test.js
• user-event (version 13.5.0) https://codesandbox.io/s/user-event-13-5-0-hf9ft?file=/index.test.js

The difference of these two sandboxes is only the version of user-event. The other conditions are completely same.
However, the result of the test named "bug?" is unexpectedly different (PASS in version 13.4.2, but FAIL in version 13.5.0).

Problem description:
The difference of these two sandboxes is only the version of user-event. The other conditions are completely same.
However, the result of the test named "bug?" is unexpectedly different (PASS in version 13.4.2, but FAIL in version 13.5.0).
Therefore, user-event (version 13.5.0) doesn't understand three {s correctly though version 13.4.2 do correctly.

Since the latest document still says

The brackets { and [ are used as special character and can be referenced by doubling them.

the different result of the test looks a bug.
If it is expected and you forget to update the document, please update the document.

Suggested solution:
Sorry but I have no idea. I'm new to user-event.

[ph-fritsche]

Thanks a lot for the report. ❤️

I think the bug would have to be fixed here for the upcoming v14:

user-event/src/utils/keyDef/readNextDescriptor.ts

Lines 24 to 32 in e39177e

	// `foo{{bar` is an escaped char at position 3,
	// but `foo{{{>5}bar` should be treated as `{` pressed down for 5 keydowns.
	const startBracketRepeated = startBracket
	? (text.match(new RegExp(`^\\${startBracket}+`)) as RegExpMatchArray)[0]
	.length
	: 0
	const isEscapedChar =
	startBracketRepeated === 2 ||
	(startBracket === '{' && startBracketRepeated > 3)

Work around until it is fixed:

userEvent.type(element, '{{')
userEvent.keyboard('{arrowleft}.')

[kumachan-mis]

Thanks for quick response and workaround.
I'm looking forward to v14!

[github-actions]

🎉 This issue has been resolved in version 14.0.0-beta.4 🎉

The release is available on:

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

Your semantic-release bot 📦🚀