@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

Answer 1

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.