Skip to content

Maximum call stack size exceeded error when testing a <select> #887

@robcaldecott

Description

@robcaldecott

Reproduction example

https://github.com/robcaldecott/user-event-select-bug

Prerequisites

  1. git clone git@github.com:robcaldecott/user-event-select-bug.git
  2. npm install
  3. npm test

Expected behavior

Selecting an option should work without an error.

Actual behavior

When attempting to select an option in a select the following error is generated:

    RangeError: Maximum call stack size exceeded

      at Object.<anonymous>.behavior.click (node_modules/@testing-library/user-event/dist/index.cjs:1443:26)
      at dispatchEvent (node_modules/@testing-library/user-event/dist/index.cjs:1623:59)
      at isElementType.type (node_modules/@testing-library/user-event/dist/index.cjs:1450:7)
      at dispatchEvent (node_modules/@testing-library/user-event/dist/index.cjs:1637:7)
      at isElementType.type (node_modules/@testing-library/user-event/dist/index.cjs:1450:7)
      at dispatchEvent (node_modules/@testing-library/user-event/dist/index.cjs:1637:7)
      at isElementType.type (node_modules/@testing-library/user-event/dist/index.cjs:1450:7)
      at dispatchEvent (node_modules/@testing-library/user-event/dist/index.cjs:1637:7)
      at isElementType.type (node_modules/@testing-library/user-event/dist/index.cjs:1450:7)
      at dispatchEvent (node_modules/@testing-library/user-event/dist/index.cjs:1637:7)

The React code being tested:

function App() {
  return (
    <label>
      <span>Fruit</span>
      <select>
        <option value="apple">Apple</option>
        <option value="orange">Orange</option>
      </select>
    </label>
  );
}

export default App;

The test that crashes:

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

test("userEvent bug", async () => {
  render(<App />);
  await userEvent.selectOptions(
    screen.getByRole("combobox", { name: /fruit/i }),
    ["Orange"]
  );
});

The code worked OK in v13.

User-event version

14.0.0

Environment

Testing Library framework: @testing-library/react@13.0.0-alpha.6

JS framework: react@18.0.0

Test environment: jest@27.5.1

DOM implementation: jsdom@16.7.0

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions