Challenge: Third Test CaseChallenge: Third Test Case


Implement the third test case for the Counter app, focusing on the decrement button functionality. The goal is to ensure that the counter value decreases correctly when clicking the decrement button. Steps:

  1. Render the App component
  2. Find the decrement button.
  3. Find the resulting text element.
  4. Simulate a click on the decrement button.
  5. Verify if the text shows the correct updated value.
  6. Repeat steps 4 and 5 to ensure the functionality is correct.
1. Use the render function from @testing-library/react to render the App component.

2. Use the screen.getByRole method to find the decrement button by specifying the role as "button" and using a regex or text match for "decrement".

3. Use the screen.getByText method to find the result text element by specifying a regex or text match for "result:".

4. Use the method to simulate a user click on the decrement button.

5. Use the expect statement with the toHaveTextContent matcher to check if the result text element shows the expected updated value after clicking the decrement button.

6. To ensure the functionality is correct, repeat the click and verification process to make sure the counter decrements as expected with each click.

Everything was clear?

Section 5. Chapter 6