Querying Form Fields

Learn different approaches for querying a form field in a test in this lesson.

Starter project

The starter project contains an EditPersonName component that includes a form that allows a person’s first and last name to be changed.

A copy of the project is in the code widget below. When the “Run” button is clicked, the app is started.

export default "test-file-stub";
Simple app to edit names

Run the app.

We should see a form rendered containing first name and last name fields with a “Save” button. The project also contains a half-implemented test to verify the first name field has the correct initial value. We’ll fully implement the test in this lesson.

The code widget below contains a copy of the project and runs the tests when the “Run” button is clicked:

export default "test-file-stub";
Half implemented test

The ByLabelText query type

To finish the test implementation, we need to get the first name input element and check that its value is "Herman".

There is a query type called ByLabelText ...

Access this course and 1400+ top-rated courses and projects.