Could not fill input with userEvent.type() #644

armandabric · 2021-04-10T20:42:20Z

@testing-library/user-event version: 13.1.2
Testing Framework and version: jest 26.6.3, @testing-library/jest-dom 5.11.10 & @testing-library/react 11.2.6
DOM Environment: jsdom

What you did:

I'm trying to fill an input:

  test.only("should fill the input", async () => {
    const { getByPlaceholderText, debug } = render(
      <input type="text" placeholder="some field" />,
    );

    const intput = getByPlaceholderText("some field");
    await userEvent.type(intput, "abcd");
    debug();

    expect(intput).toHaveValue("abcd");
  });

What happened:

I got an error message during the test execution:


    expect(element).toHaveValue(abcd)

    Expected the element to have value:
      abcd
    Received:
      a

      66 |     debug();
      67 | 
    > 68 |     expect(intput).toHaveValue("abcd");
         |                    ^
      69 |   });
      70 | 
      71 |   it.skip("should allow the user to update it's balance", async () => {

      at Object.toHaveValue (app/accounting/Ui/components/Dashboard/BalanceCard.spec.tsx:68:20)

  console.log
    <body>
      <div>
        <input
          placeholder="some field"
          type="text"
        />
      </div>
    </body>

      at debug (node_modules/@testing-library/react/dist/pure.js:107:13)

  console.error
    TypeError: element.ownerDocument.createRange is not a function
        at setSelectionRange (/home/armand/workspace/myproject/node_modules/@testing-library/user-event/dist/utils/edit/selectionRange.js:85:39)
        at setSelectionRangeAfterInput (/home/armand/workspace/myproject/node_modules/@testing-library/user-event/dist/keyboard/shared/fireInputEvent.js:38:32)
        at fireInputEvent (/home/armand/workspace/myproject/node_modules/@testing-library/user-event/dist/keyboard/shared/fireInputEvent.js:29:3)
        at Object.handle (/home/armand/workspace/myproject/node_modules/@testing-library/user-event/dist/keyboard/plugins/character.js:167:32)
        at applyPlugins (/home/armand/workspace/myproject/node_modules/@testing-library/user-event/dist/keyboard/keyboardImplementation.js:137:12)
        at keypress (/home/armand/workspace/myproject/node_modules/@testing-library/user-event/dist/keyboard/keyboardImplementation.js:115:5)
        at keyboardImplementation (/home/armand/workspace/myproject/node_modules/@testing-library/user-event/dist/keyboard/keyboardImplementation.js:47:9)
        at keyboardImplementationWrapper (/home/armand/workspace/myproject/node_modules/@testing-library/user-event/dist/keyboard/index.js:55:65)
        at typeImplementation (/home/armand/workspace/myproject/node_modules/@testing-library/user-event/dist/type/typeImplementation.js:49:51)
        at Object.type (/home/armand/workspace/myproject/node_modules/@testing-library/user-event/dist/type/index.js:27:60)
        at Object.type (/home/armand/workspace/myproject/app/accounting/Ui/components/Dashboard/BalanceCard.spec.tsx:65:21)
        at Object.asyncJestTest (/home/armand/workspace/myproject/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:106:37)
        at /home/armand/workspace/myproject/node_modules/jest-jasmine2/build/queueRunner.js:45:12
        at new Promise (<anonymous>)
        at mapper (/home/armand/workspace/myproject/node_modules/jest-jasmine2/build/queueRunner.js:28:19)
        at /home/armand/workspace/myproject/node_modules/jest-jasmine2/build/queueRunner.js:75:41
        at processTicksAndRejections (internal/process/task_queues.js:93:5)
        at runNextTicks (internal/process/task_queues.js:62:3)
        at listOnTimeout (internal/timers.js:523:9)
        at processTimers (internal/timers.js:497:7)

The text was updated successfully, but these errors were encountered:

ph-fritsche · 2021-04-11T08:17:20Z

I could not reproduce this behavior. If you can reproduce the behavior in codesandbox, I'll gladly reopen.

There might be a problem with your setup. Check the jsdom version you're using.

bo5o · 2021-05-02T09:03:16Z

I am getting the same error after upgrading to latest user-event. I am using testing-library/vue.

ph-fritsche · 2021-05-02T09:08:55Z

@cbows You most probably encountered a different issue based on Vue's asynchronous rendering.
But anyway please provide a reproduction example. We can not do anything about issues described vaguely.
The one described above could not be reproduced and is almost certainly a problem with the environment and not userEvent.

bo5o · 2021-05-02T11:53:45Z

I can reproduce the error with the example above.

Component.vue

<template>
  <input type="text" placeholder="some field" />
</template>

<script lang="ts">
  import { Component, Vue } from "vue-property-decorator";

  @Component
  export default class MyComponent extends Vue {}
</script>

Component.spec.ts

import { screen, render } from "@testing-library/vue";

import Component from "@/components/Component.vue";
import userEvent from "@testing-library/user-event";

describe("Component.vue", () => {
  it("can change value", async () => {
    render(Component);

    const input = screen.getByPlaceholderText("some field");

    await userEvent.type(input, "abcd", { delay: 50 });

    expect(input).toHaveValue("abcd");
  });
});

On user-event 12.8.3 I get

 PASS  tests/unit/components/Component.spec.ts
  Component.vue
    ✓ can change value (240 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.747 s, estimated 12 s

On user-event 13.1.8 I get

 FAIL  tests/unit/components/Component.spec.ts (11.312 s)
  Component.vue
    ✕ can change value (84 ms)

  ● Component.vue › can change value

    TypeError: element.ownerDocument.createRange is not a function

      10 |     const input = screen.getByPlaceholderText("some field");
      11 |
    > 12 |     await userEvent.type(input, "abcd", { delay: 50 });
         |                     ^
      13 |
      14 |     expect(input).toHaveValue("abcd");
      15 |   });

      at setSelectionRange (node_modules/@testing-library/user-event/dist/utils/edit/selectionRange.js:85:39)
      at setSelectionRangeAfterInput (node_modules/@testing-library/user-event/dist/keyboard/shared/fireInputEvent.js:38:32)
      at fireInputEvent (node_modules/@testing-library/user-event/dist/keyboard/shared/fireInputEvent.js:29:3)
      at Object.handle (node_modules/@testing-library/user-event/dist/keyboard/plugins/character.js:167:32)
      at applyPlugins (node_modules/@testing-library/user-event/dist/keyboard/keyboardImplementation.js:137:12)
      at keypress (node_modules/@testing-library/user-event/dist/keyboard/keyboardImplementation.js:115:5)
      at keyboardImplementation (node_modules/@testing-library/user-event/dist/keyboard/keyboardImplementation.js:47:9)
      at keyboardImplementationWrapper (node_modules/@testing-library/user-event/dist/keyboard/index.js:55:65)
      at typeImplementation (node_modules/@testing-library/user-event/dist/type/typeImplementation.js:49:51)
      at node_modules/@testing-library/user-event/dist/type/index.js:22:96
      at Object.asyncWrapper (node_modules/@testing-library/dom/dist/config.js:26:23)
      at Object.type (node_modules/@testing-library/user-event/dist/type/index.js:22:34)
      at Object.<anonymous> (tests/unit/components/Component.spec.ts:12:21)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        12.13 s

bo5o · 2021-05-02T12:00:12Z

The last working version seems to be 13.0.10, on 13.0.11 I get another error:

 FAIL  tests/unit/components/Component.spec.ts
  ● Test suite failed to run

    Cannot find module 'utils/misc/isElementType' from 'node_modules/@testing-library/user-event/dist/utils/edit/calculateNewValue.js'

    Require stack:
      node_modules/@testing-library/user-event/dist/utils/edit/calculateNewValue.js
      node_modules/@testing-library/user-event/dist/utils/index.js
      node_modules/@testing-library/user-event/dist/click.js
      node_modules/@testing-library/user-event/dist/index.js
      tests/unit/components/Component.spec.ts

      at Resolver.resolveModule (node_modules/jest-runtime/node_modules/jest-resolve/build/index.js:306:11)
      at Object.<anonymous> (node_modules/@testing-library/user-event/dist/utils/edit/calculateNewValue.js:8:22)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        2.235 s

Starting with 13.0.12 I get the error described earlier.

ph-fritsche · 2021-05-02T13:40:40Z

https://codesandbox.io/s/silent-cdn-f57qr?file=/src/644.test.js

bo5o · 2021-05-02T13:47:02Z

Could this be related to TypeScript? I will try to reproduce on CodeSandbox.

ph-fritsche · 2021-05-02T14:12:02Z

No, as already mentioned it could be related to jsdom. But you can keep on refusing to look up which version you're using.

bo5o · 2021-05-02T14:15:13Z

Oh sorry. I missed that. I have jsdom@16.5.3 installed.

bo5o · 2021-05-02T17:45:19Z

I have done the following steps to reproduce the error:

Create new vue project with vue-cli (enabled plugins: typescript, unit-jest).
Install testing-library dependencies (@testing-library/{dom,jest-dom,vue,user-event}).
Create the component and test I described above.
Run the test.

You can find the code here: https://github.com/cbows/user-event-issue-644

Maybe someone is able to generate a CodeSandbox from this, I stopped trying after a whole bunch of unrelated errors (haven't used CodeSandbox before, so probably just some issue with the setup).

EDIT: The same happens without TypeScript enabled.

ph-fritsche · 2021-05-02T18:58:38Z

You can find the code here: https://github.com/cbows/user-event-issue-644

jsdom@^15.2.1:
version "15.2.1"

bo5o · 2021-05-02T21:12:13Z

Ah, I had forgotten to explicitly add jsdom in the reproduction example (had it added already in my original repo), so I added it now. However, the error remains...

But the code you pointed at hints towards jest-environment-jsdom-fifteen which is added as a dependency by the @vue/cli-plugin-unit-jest package and uses jsdom@15 which I had overlooked until now.

In the current dev branch, this dependency has already been removed, but it is still present in the latest stable version v4.5.12. As a temporary workaround I have installed jest-environment-jsdom-sixteen and overwrite jest's testEnvironment to use jest-environment-jsdom-sixteen instead of jest-environment-jsdom-fifteen.

Thanks for being patient and pointing me towards the error!

EDIT: Another solution as suggested in vuejs/vue-cli#5114 might be to use yarns selective dependency resolutions and upgrade jest, babel-jest and ts-jest

  "resolutions": {
    "jest": "^26.6.3",
    "ts-jest": "^26.4.4",
    "babel-jest": "^26.6.3"
  }

and use the default testEnvironment: 'jsdom' (jest v26 ships with jsdom@16)

ph-fritsche closed this as completed Apr 11, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Could not fill input with userEvent.type() #644

Could not fill input with userEvent.type() #644

armandabric commented Apr 10, 2021

ph-fritsche commented Apr 11, 2021

bo5o commented May 2, 2021

ph-fritsche commented May 2, 2021 •

edited

bo5o commented May 2, 2021

bo5o commented May 2, 2021

ph-fritsche commented May 2, 2021

bo5o commented May 2, 2021

ph-fritsche commented May 2, 2021

bo5o commented May 2, 2021

bo5o commented May 2, 2021 •

edited

ph-fritsche commented May 2, 2021

bo5o commented May 2, 2021 •

edited

Could not fill input with userEvent.type() #644

Could not fill input with userEvent.type() #644

Comments

armandabric commented Apr 10, 2021

ph-fritsche commented Apr 11, 2021

bo5o commented May 2, 2021

ph-fritsche commented May 2, 2021 • edited

bo5o commented May 2, 2021

bo5o commented May 2, 2021

ph-fritsche commented May 2, 2021

bo5o commented May 2, 2021

ph-fritsche commented May 2, 2021

bo5o commented May 2, 2021

bo5o commented May 2, 2021 • edited

ph-fritsche commented May 2, 2021

bo5o commented May 2, 2021 • edited

ph-fritsche commented May 2, 2021 •

edited

bo5o commented May 2, 2021 •

edited

bo5o commented May 2, 2021 •

edited