Course Content

Expert React

1. React Key Concepts

Course Overview React Component Approaches to Styling in React Apps React Hooks React Context Local Development Environment

2. React Router

Fundamentals of Routing Get Started with React Router Basic Routing Lazy Loading Navigation Routes Basic Concepts Sum Up Challenge: Route Basic Concepts Query String Modify Query String React Router Section Sum Up

3. Redux Toolkit

Introduction to Redux Getting Started with Redux Toolkit Real Deal Store Actions Reducer Involve Redux into React Challenge Time Challenge: Store Challenge: Actions Challenge: Reducer Challenge: Involve Redux into React Redux Toolkit Section Sum Up

4. Formik

Powerful Form Library for React Get Started with Formik Custom Formik Hook Involve Formik into React component Add Initial Values Form Submission Form Validation Challenge Overview Challenge: useFormik Hook Challenge: Binding Formik with React Component Challenge: Add Initial Values Challenge: Form Submission Challenge: Validation Formik Section Sum Up

5. Jest

Introduction to Testing in React Get Started with Jest Create the Jest Test File First Test Case Second Test Case Challenge: Third Test Case Jest Section Sum Up

6. Next Steps

What is next?

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 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.

Solution

Everything was clear?

Section 5. Chapter 6