userEvent.type generating "not a function" error

• @testing-library/user-event version: ^11.0.0
• Testing Framework and version: Jest ^26.0.1
• DOM Environment: Rendering with render from @testing-library/react ^10.0.4

Relevant code or config

import React from 'react';
import 'mobx-react-lite/batchingForReactDom';
import '@testing-library/jest-dom';
import {
  fireEvent,
  render,
  screen,
  waitFor,
} from '@testing-library/react';
import userEvent from '@testing-library/user-event';

// A bunch of other code and tests

test('Adding text to the filter box works', async () => {
  const state = AppState.create({ curriculum, gradingSession });
  render(
    <ToastsProvider>
      <GradingSessionBuilder
        addNewGradingSession={() => null}
        curriculum={state.curriculum}
        gradingSession={GradingSession.create({})}
      />
    </ToastsProvider>,
  );

  // PRT and Run buttons in doc
  const prtButton = screen.queryByRole('button', { name: /PRT \(Week 2\)/i });
  expect(prtButton).toBeInTheDocument();
  const runButton = screen.getByRole('button', { name: /4-mile run \(Week 2\)/i });
  expect(runButton).toBeInTheDocument();

  // Filter so there are only run buttons
  await userEvent.type(screen.getByRole('textbox'), '4-mile');
  expect(prtButton).toBeNull();
  expect(runButton).toBeInTheDocument();
});

What you did: Executed the above code via the command line (OSX, Node v. 12.16.3)

What happened: I received the following error:

✕ Adding text to the filter box works (811 ms)

  ● Adding text to the filter box works

    TypeError: (0 , _dom.getConfig) is not a function

      134 |
      135 |   // Filter so there are only run buttons
    > 136 |   await userEvent.type(screen.getByRole('textbox'), '4-mile');
          |                   ^
      137 |   expect(prtButton).toBeNull();
      138 |   expect(runButton).toBeInTheDocument();
      139 | });

      at Object.type (node_modules/@testing-library/user-event/dist/index.js:356:28)
      at _callee2$ (app/javascript/new_assessments/__tests__/GradingSessionBuilder.test.jsx:136:19)
      at tryCatch (node_modules/regenerator-runtime/runtime.js:45:40)
      at Generator.invoke [as _invoke] (node_modules/regenerator-runtime/runtime.js:271:22)
      at Generator.prototype.<computed> [as next] (node_modules/regenerator-runtime/runtime.js:97:21)
      at asyncGeneratorStep (node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
      at _next (node_modules/@babel/runtime/helpers/asyncToGenerator.js:25:9)
      at node_modules/@babel/runtime/helpers/asyncToGenerator.js:32:7
      at Object.<anonymous> (node_modules/@babel/runtime/helpers/asyncToGenerator.js:21:12)

I have checked and screen.getByRole('textbox'), '4-mile'); does definitely find the correct textbox. Also, userEvent exists and has the async type method on it. Several other tests in the same file work - this error only shows up for the one instance where I’m using userEvent.type.

Even if I comment out all the expects, that one line still throws the same error.

The component is a very large parent with a bunch of children, and I’m under NDA so I can’t really make the whole thing available, but I haven’t been able to fix anything by tweaking the tag itself on the React side of things.

Reproduction repository: n/a

Problem description: I’m willing to concede I may be using userEvent.type incorrectly, but … it doesn’t seem like it?

Suggested solution: Your guess is as good as mine.

[kentcdodds]

As mentioned in the release notes the latest version of user-event requires @testing-library/dom v7.9.0.

This was a breaking change and was released as a major version.

Upgrade your version of @testing-library/dom and you should be fine.

One note is that @testing-library/react (which is probably where you’re getting @testing-library/dom) currently lists ^7.8.0 as it’s version for @testing-library/dom. This should resolve to 7.9.0, but since that doesn’t always seem to work thanks to people’s lock files and the general mess of npm clients in the world, I’ll go ahead and release a patch version of @testing-library/react to update that.

[damiangreen]

Seeing this with the latest versions

 "@testing-library/dom": "^8.13.0",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^14.0.4",
    ```