5

I found an issues in the user-event github and it says its resolved in version 12.0.1 but I'm on version 12.1.5 and I keep getting the error.

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

test("Gets a code and renders it in a new route", () => {
  const { getByLabelText } = render(<App />);
  act(() => {
    userEvent.type(getByLabelText("Code:"), "12345");
  });
  expect(getByLabelText("Code:")).toHaveValue("12345");
});
  ● Gets a code and renders it in a new route

    expect(element).toHaveValue(12345)

    Expected the element to have value:
      12345
    Received:
      5
5
  • if you're using userEvent, I think you can drop the act. Can you show us your App component code?
    – Gonzalo.-
    Commented Sep 18, 2020 at 21:26
  • 3
    I did drop the userEvent and now my test pass but I keep getting the warning about wrapping user events in act. What could I do to stop that warning? About posting my App code Stack Overflow doesn't let me post the code because it says I should add more details and less code. Commented Sep 18, 2020 at 21:40
  • 1
    I'm sitting with the exact same issue right now, did you every find a solution @medicengonzo ? It seems the issue is being discussed here as well github.com/testing-library/user-event/issues/387
    – Hylle
    Commented Jan 3, 2021 at 18:00
  • 1
    @Hylle just posted an answer which might help if you're still having the issue
    – max
    Commented Apr 14, 2021 at 19:16
  • 2
    Thanks @max I'll try it out at some point, although I ended up fixing it with a hacky userEvent.type("example", { delay: 1})
    – Hylle
    Commented Apr 14, 2021 at 20:47

1 Answer 1

2

Your problem might be in the implementation of the change handler. I recently had a similar issue, and here's what I thought would work, versus what really worked. More info at this github comment.

function handleChange(ev: FormEvent, key = "") {
  ev.preventDefault();

  // ✅ Passes
  const value = (ev.target as HTMLInputElement).value;

  setState(s => {
    // ❌ Fails (individual characters instead of progressively built up strings)
    // const value = (ev.target as HTMLInputElement).value;

    return { ...s, [key]: value };
  });
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.