Test input without label with React Testing Library

Question

I use react-testing-library in my application. Normally, to check if the input is in the form, we use getByLabelText. For example:

getByLabelText(/name/i)

But what if my input does not have any label? This is because of the design (UI) so I cannot have a label for the input. How can I check if that input exists in the form?

CWSites · Accepted Answer · 2021-01-19 14:25:24Z

9

You can use the following to target a text input field.

getByRole('textbox', {name: /name/i})

More info https://testing-library.com/docs/queries/about#priority

edited Jan 19, 2021 at 14:25

answered Jan 19, 2021 at 14:09

CWSites

1,8942 gold badges24 silver badges35 bronze badges

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

2 Comments

coinhndp Over a year ago

How can I know that I get the correct input? For example, my input's name is "name"

CWSites Over a year ago

If you need to verify, you could always assign that to a variable and then use screen.debug(variableName);

Chaymae · Accepted Answer · 2021-12-07 08:50:18Z

2

You can also add an aria-label to your input:

<TextField inputProps={{'aria-label': "example" }} />

and then in your test:

expect(screen.getByRole("textbox", { name: "example"})).toBeInTheDocument();

edited Dec 7, 2021 at 8:50

answered Dec 7, 2021 at 8:43

Chaymae

313 bronze badges

Comments

Mantas Astra · Accepted Answer · 2021-01-19 14:12:19Z

1

You could add a test ID to the input that solely will be used for testing purposes.

<input data-testid="your-id" />

And in your test you would do a query rather than get as get will fail the test if the element doesn't exist at all.

expect(queryByTestId('your-id')).toBeInTheDocument()

Or you could search by display value to look for the input value

expect(queryByDisplayValue('input-value')).toBeInTheDocument()

answered Jan 19, 2021 at 14:12

Mantas Astra

1,0827 silver badges16 bronze badges

Comments

Branislav Lazic · Accepted Answer · 2021-01-19 14:11:20Z

0

If you don't know an expected text in your input, you can add "data-testid" to your input and find it like that:

<input data-testid="my-input"/>

const myInput = getByTestId('my-input');

answered Jan 19, 2021 at 14:11

Branislav Lazic

14.9k9 gold badges63 silver badges90 bronze badges

2 Comments

coinhndp Over a year ago

Can I get it by the input's name? I don't think we should add data-testid to all the inputs. I have around 30 inputs in my form

Branislav Lazic Over a year ago

As far as I remember, you can by digging through document. But it's a messy job.

Collectives™ on Stack Overflow

Test input without label with React Testing Library

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related