React Testing library with testIdAttribute

Question

I have a Form with children components for input fields, i want to make a test for this input component with the id. The ID is created with useId if it isn't provided so it is dynamically. How can this be done?

test("Input Test", () => {
  const Wrapper = (props: { children: React.ReactNode }) => {
    const formMethods = useForm();
    return <FormProvider {...formMethods}>{props.children}</FormProvider>;
  };

  render(
    <Wrapper>
      <InputField name={"First Name"} label={"fname"} type={"text"} />
      <InputField name={"Last Name"} label={"lname"} type={"text"} />
    </Wrapper>
  );
  configure({ testIdAttribute: "id" });

  const inputfname = screen.getByTestId("fname");
  const inputlname = screen.getByTestId("lname");

  expect(inputfname).toBeInTheDocument();
  expect(inputlname).toBeInTheDocument();

});

  const fieldId = id ?? useId();

  <label htmlFor={fieldId}>{label}</label>
  <input
     id={fieldId}
     {...props}
   />

Why don't you use the top priority query of finding the component by role, in which case the specific value of the ID (which is not the same as a test ID) is irrelevant? — jonrsharpe
– jonrsharpe, Commented Dec 27, 2022 at 11:41

Farnam H · Accepted Answer · 2022-12-27 13:03:18Z

2

If you want to test with test-id you have to write your html element like this:

<div data-testid="custom-id" />

You can check the docs here.

And because useId() is a random thing so you can't test it because you don't know the value, so it's better to test your component with another thing.

edited Dec 27, 2022 at 13:03

answered Dec 27, 2022 at 12:28

Farnam H

1902 silver badges6 bronze badges

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

Collectives™ on Stack Overflow

React Testing library with testIdAttribute

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related