Share Description
In this course, you will learn :
- React Testing Library is used to test both simple and complex React applications.
- Best Practises for React Testing: how to test behaviour rather than implementation.
- Making the most of Jest's watch mode, which includes only running one file or test at a time.
- The most common errors returned by Testing Library and how to fix them.
Syllabus :
1. Simple App: Color Button
- Overall Course Plan
- Start Color Button App
- JEST-DOM BUG! False positives with camelCase `toHaveStyles`
- `logRoles` method for debugging roles
- Test Behavior when Clicking Button
- Manual Acceptance Testing
- Test Initial Condition of Button and Checkbox
- Introduction to Code Quizzes
- Finding Checkbox with Label
- Unit Testing Functions
- When to Unit Test
2. ESLint with Testing Library, plus Prettier
- ESLint and Prettier
- ESLint for Testing Library and Jest-DOM
- Instructions for displaying ESLint in the status bar for ESLint extension 2.4.0+
- Configure ESLint in VSCode
- Configure Prettier in VSCode
- Review: ESLint and Prettier
3. Sundaes On Demand: Form Review and Popover
- Introduction to Sundaes on Demand
- ESLint and Prettier Setup
- React Bootstrap Setup
- Code Organization and Introduction to SummaryForm
- Code Quiz: Checkbox Enables Button
- OPTIONAL React Code: SummaryForm Checkbox and Button
- React Bootstrap Popover and Testing Library userEvent
- IMPORTANT, PLEASE READ!: code update required to avoid errors
- Replace `fireEvent` with `userEvent`
- Screen Query Methods
- Testing Element is Not on Page: Popover Tests
4. Simulating Server Response with Mock Service Worker
- OrderEntry Server Data Introduction
- Introduction to Mock Service Worker and Handlers
- Why not mock axios using Jest?
- Setting up the Mock Service Worker Server
- Tests with Mock Service Worker: Scoop Options
- IMPORTANT, PLEASE READ: axios issue with 1.x
- OPTIONAL React Code: Options and ScoopOption Components
- Using `await findBy` to Find Elements that Populate Asynchronously
- Code Quiz! Topping Options from Server
- TROUBLESHOOTING: `Unable to find role="img"` error
- Error Server Response Planning
- Simulating Server Error Response in Tests
- OPTIONAL React Code: Alert Banner for Options Server Error
- Running only Selected Tests, and `waitFor`
- TROUBLESHOOTING: Tests passing but getting warnings / errors?
- OPTIONAL: Frequent Question: Why doesn't "name" work with the role "alert"?
- Review: Server Error Response and Test Debugging Tools
5. Testing Components Wrapped in a Provider
- Intro to Tests for Total and Subtotals
- Entering Text Input: Subtotal Tests
- OPTIONAL React Code: OrderDetails Context
- OPTIONAL React Code: Use Context to Display Scoops Subtotal
- Adding Context to Test Setup
- TROUBLESHOOTING: "not wrapped in act(...)" error during next lecture
- Creating Custom Render to Wrap in Provider By Default
- Review: Scoops Subtotal with Context
- Code Quiz! Toppings Subtotal
- OPTIONAL React Code: Toppings Checkboxes
- Note on equivalent error strings for next lecture
- Code Quiz! Grand Total
- "Not wrapped in act()..." Error
- OPTIONAL: Why is the explicit unmount needed
- Manual Acceptance Testing
6. Final Exam: Order Phases
- Introduction to Final Exam: Order Phases
- Adding a New Handler: Copy/Paste Warning!
- Debugging Tips
- OPTIONAL React Hints for Order Phase Coding
- Final Exam Solution
- TROUBLESHOOTING: "loading" test fails
- OPTIONAL React Code: Order Phases
- Jest Mock Functions as Props
- Review: Final Exam, and Introduction to Optional Practice
- Common Mistakes with React Testing Library
