Course Content
Expert React
4. Formik
Powerful Form Library for ReactGet Started with FormikCustom Formik HookInvolve Formik into React componentAdd Initial ValuesForm SubmissionForm ValidationChallenge OverviewChallenge: useFormik HookChallenge: Binding Formik with React ComponentChallenge: Add Initial ValuesChallenge: Form SubmissionChallenge: ValidationFormik Section Sum Up
6. Next Steps
Expert React
Challenge: Third Test Case
Task
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:
- Render the App component
- Find the decrement button.
- Find the resulting text element.
- Simulate a click on the decrement button.
- Verify if the text shows the correct updated value.
- Repeat steps 4 and 5 to ensure the functionality is correct.
Hint
1. Use the
2. Use the
3. Use the
4. Use the
5. Use the
6. To ensure the functionality is correct, repeat the click and verification process to make sure the counter decrements as expected with each click.
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
fireEvent.click
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