Course Content
Expert React
Expert React
4. Formik
6. Next Steps
Second Test Case
Step 6: Create the second test
Practice
The second test will be dedicated to checking the increment button's functionality. The test case will simulate clicking the increment button two times and then verify if the result element displays the updated value Result: 2
. If the expectation is met, the test will pass, indicating that the increment functionality of the counter works correctly. If it fails, there may be an issue with the increment logic or the app's rendering of the result element.
Code explanation:
- Line 2: This line renders the
<App />
component using therender
function from Testing Library for React, as done in the previous test. This prepares the component for testing. - Line 3-4: These two lines find the increment button and the result element using
screen.getByRole
andscreen.getByText
methods, respectively. The increment button is located by its rolebutton
and the regular expression/increment/i
for the name (case-insensitive). The result element is located by the text that containsresult:
(case-insensitive). - Line 6: This line simulates a user clicking the increment button using the
fireEvent.click
method from Testing Library. After this click, the counter increments once. - Line 7: This Jest
expect
statement checks if theresultElement
has the textResult: 1
after the first click on the increment button. If the text content matches the expected value, the test passes; otherwise, it fails. - Line 9: This line simulates another user's click on the increment button. After this second click, the counter increments again.
- Line 10: This Jest
expect
statement checks if theresultElement
has the textResult: 2
after the second click on the increment button. If the text content matches the expected value, the test passes; otherwise, it fails.
Complete code
Everything was clear?