Input changes do not occur with default value with @testing-library/react

Question

I have the following input:

<input
        name="name"
        type="text"
        data-testid="input"
        onChange={(e) => setTypedName(e.target.value)}
        value=""
      />

the test:

test.only('Should change the value of the input ', async () => {
    makeSut()
    const nameInput = sut.getByTestId('input') as HTMLInputElement
    fireEvent.change(nameInput, { target: { value: 'value' } })
    expect(nameInput.value).toBe('value')
  })

My assertion fails, as the change does not take effect, while the value remains to be ""

If I remove value="" from the input, change takes effect.

I have tried using fireEvent.input fireEvent.change, userEvent.type and nothing works.

It seems that when I use a default value the testing library does not accept changes, even though it works on production...

Any hints?

Using:

jest 27.3.1
@testing-library/react 12.1.2
@testing-library/user-event 13.5.0

Giorgio · Accepted Answer · 2021-10-30 07:59:59Z

2

I'm not sure, but perhaps this is due to React relying more on explicitly setting the value of components through JS rather than through "vanilla" HTML.

Explicitly setting the input value through JS makes your test pass:

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

const Component = () => {
  const [value, setValue] = useState("");
  return (
    <input
      name="name"
      type="text"
      data-testid="input"
      onChange={(e) => setValue(e.target.value)}
      value={value}
    />
  );
};

test.only("Should change the value of the input ", async () => {
  render(<Component />);
  const nameInput = screen.getByTestId("input") as HTMLInputElement;
  userEvent.type(nameInput, "value");
  expect(nameInput.value).toBe("value");
});

PS I slightly modified your test to use render because I'm not sure what makeSut is, and I assume it's some custom function that you created to render your component.

answered Oct 30, 2021 at 7:59

Giorgio

2,3374 gold badges25 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Arp Over a year ago

The original code has the default value set as per on our answer. THe inputs are populated in a form for editing an entity. The issue remains =/

Giorgio Over a year ago

I'm not sure I understand. Do you mean that you have to use value="" and you cannot use value={value}?

Arp Over a year ago

what I mean is that the Input's value is populated on render and I am not able to fire an event to change it's value with @testing-library/react. On production it works flawlessly. This issue only occurs in my testing environment.

Arp Over a year ago

I have tried userEvent.type, fireEvent.change fireEvent.input, etc. Nothing seems to work. The state does not change. If I rip the prop value from the input it works normally on the testing enviro

Arp Over a year ago

it is super weird....

|

Collectives™ on Stack Overflow

Input changes do not occur with default value with @testing-library/react

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related