Exercise: Firing Events
Learn to implement and complete tests for a React SearchForm component by simulating user events such as submitting searches, displaying validation errors, showing search indicators, and clearing results. Understand how to verify UI changes during asynchronous actions to build robust, maintainable tests.
Starter project
The starter project contains a SearchForm component in the SearchForm.js file in the src/SearchForm folder. The component allows a user to enter search criteria and get matching fruit names.
Run the app by executing the following command in a terminal:
npm start
Enter “app” into the search box and press the “Search” button. We will see the matches appear with a “Clear” button:
export default "test-file-stub";
If the “Clear” button is pressed, the search will be reset.
The project also contains half-implemented tests for the SearchForm component in a file called SearchForm.test.js. In this ...