userEvent.type generating "not a function" error

[cwbuecheler]

• @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.

[transmissions11]

Having this as well!

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

      25 |   expect(screen.getByText("Name:")).toBeInTheDocument();
      26 | 
    > 27 |   await userEvent.type(
         |                   ^
      28 |     screen.getByPlaceholderText("This is a placeholder."),
      29 |     "Ben Mayer"
      30 |   );

      at Object.type (node_modules/@testing-library/user-event/dist/index.js:356:28)
      at Object.<anonymous> (src/components/shared/FormInput.test.js:27:19)

[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.

[cwbuecheler]

Awesome, thanks @kentcdodds - apologies for not checking the versions. It's hard sometimes to keep up with all the changes in this ecosystem. :)

[ctoppel]

This might be project related, but any reason someone could think of that the latest version of @testing-library/dom is not being installed with @testing-library/react?

I had to install @testing-library/dom manually in order to get things to work...

[kentcdodds]

That can happen when your lockfile keeps the older version

[ctoppel]

Ya, that was it. Thanks. Deleted the lockfile, removed node modules, and installed modules fresh (which created and new lockfile) and all was good.

…

Sent from my iPhone

On Jun 5, 2020, at 5:25 PM, Kent C. Dodds ***@***.***> wrote:  That can happen when your lockfile keeps the older version — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[herecydev]

@kentcdodds are the versions correct? I've just been spinning my wheels with the same error.

I think the minimum dependency is not ^7.9.0 but actually ^7.16.0. The change to createEvent occurred here: testing-library/dom-testing-library@df57d7b

Which was released in 7.16.0. So I'm pretty sure this needs bumping: https://github.com/testing-library/user-event/blob/master/package.json#L51

[kentcdodds]

Ah yeah, that was a mistake in the latest release. That should be updated. Want to fix that?

[herecydev]

Yep I'll send a PR in a bit

[kentcdodds]

🎉 This issue has been resolved in version 12.0.2 🎉

The release is available on:

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

Your semantic-release bot 📦🚀

[thompson4822]

I'm using @testing-library/svelte and seeing this issue as well. In package-lock.json, it shows a dependency on @testing-library/dom of ^7.0.3

[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",
    ```

[sesamemaki]

still having same issues :S

[paulodiovani]

I was having the same issues, but due to a race condition between react-dom checks and jsdom init.

• React Dom will check for the environment on import time, not execution time: https://github.com/facebook/react/blob/cae635054e17a6f107a39d328649137b83f25972/packages/shared/ExecutionEnvironment.js#L10-L14
• So, the jsdom initialization must be done before any import from react or react-dom
• If you use babel/register, must also initialize jsdom before it
• The cause of issue may be similar when using jest-dom, my current project uses mocha

[mikhaylov-ya]

Having same issues with
@testing-library/user-event@^13.2.1 @testing-library/dom@^8.2.0 @testing-library/jest-dom@^5.14.1