Querying Form Fields
Learn different approaches for querying a form field in a test in this lesson.
We'll cover the following...
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";
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";
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, which retrieves an input element associated with a label containing particular text.
Note that a label element can be ...