react-testing-library-course

Course material for testing React components using react-testing-library

• react-dom.js - Render a React component for testing
• jest-dom.js - Use jest-dom for improved assertions
• dom-testing-library.js - Use dom-testing-library to write more maintainable React tests
• react-testing-library.js - Use react-testing-library to render and test React Components
• localized.js - Testing localized content with react-testing-library
• state.js - Test React Component state changes with react-testing-library
• prop-updates.js - Test prop updates with react-testing-library
• a11y.js - Test accessibility of rendered React Components with jest-axe
• dependency-injection.js - Mock HTTP Requests with Dependency Injection in React Component Tests
• http-jest-mock.js - Mock HTTP Requests with jest.mock in React Component Tests
• mock-component.js - Mock react-transition-group in React Component Tests with jest.mock
• error-boundaries.js - Test componentDidCatch handler error boundaries with react-testing-library
• tdd-markup.js - Test drive the development of a React Form with react-testing-library
• tdd-functionality.js - TDD the functionality of a React Form with react-testing-library
• react-router.js - Test react-router Provider history object in React Component Tests with createMemoryHistory
• redux.js - Test a redux connected React Component
• custom-hook.js - Test a custom hook
• portals.js - Test React portals
• unmounting.js - Test Unmounting a React Component with react-testing-library
• app.js - Testing the full application.

Note: the setup for this project uses kcd-scripts. Don't worry about that. You can learn about how to configure jest properly in the "Configure Jest for Testing JavaScript Applications" module of TestingJavaScript.com

1. Intro to Test React Components with Jest and React Testing Library
2. Render a React Component for Testing

• react-dom.js

3. Use Jest DOM for Improved Assertions

• jest-dom.js

4. Use DOM Testing Library to Write More Maintainable React Tests

• dom-testing-library.js

5. Use React Testing Library to Render and Test React Components

• react-testing-library.js

6. Debug the DOM State During Tests using React Testing Library’s debug Function

• react-testing-library.js

7. Test React Component Event Handlers with fireEvent from React Testing Library

• state.js

8. Improve Test Confidence with the User Event Module

• state.js

9. Test Prop Updates with React Testing Library

• prop-updates-01.js

10. Assert That Something is NOT Rendered with React Testing Library

• prop-updates-02.js

11. Test Accessibility of Rendered React Components with jest-axe

• a11y.js

12. Mock HTTP Requests with jest.mock in React Component Tests

• http-jest-mock.js

13. Mock HTTP Requests with Dependency Injection in React Component Tests

• dependency-injection.js

14. Mock react-transition-group in React Component Tests with jest.mock

• mock-components.js

15. Test componentDidCatch Handler Error Boundaries with React Testing Library

• error-boundary-01.js

16. Hide console.error Logs when Testing Error Boundaries with jest.spyOn

• error-boundary-02.js

17. Ensure Error Boundaries Can Successfully Recover from Errors

• error-boundary-03.js

18. Use React Testing Library’s Wrapper Option to Simplify using rerender

• error-boundary-04.js

19. Test Drive the Development of a React Form with React Testing Library

• tdd-01-markup.js

20. Test Drive the Submission of a React Form with React Testing Library

• tdd-02-state.js

21. Test Drive the API Call of a React Form with React Testing Library

• tdd-03-api.js

22. Test Drive Mocking react-router’s Redirect Component on a Form Submission

• tdd-04-router-redirect.js

23. Test Drive Assertions with Dates in React

• tdd-05-dates.js

24. Use Generated Data in Tests with tests-data-bot to Improve Test Maintainability

• tdd-06-generate-data.js

25. Test Drive Error State with React Testing Library

• tdd-07-error-state.js

26. Write a Custom Render Function to Share Code between Tests and Simplify Tests

• tdd-08-custom-render.js

27. Test React Components that Use the react-router Router Provider with createMemoryHistory

• react-router-01.js

28. Initialize the history Object with a Bad Entry to Test the react-router no-match Route

• react-router-02.js

29. Create a Custom render Function to Simplify Tests of react-router Components

• react-router-03.js

30. Test a Redux Connected React Component

• redux-01.js

31. Test a Redux Connected React Component with Initialized State

• redux-02.js

32. Create a Custom Render Function to Simplify Tests of Redux Components

• redux-03.js

33. Test a Custom React Hook with React’s Act Utility and a Test Component

• custom-hook-01.js

34. Write a Setup Function to Reduce Duplication of Testing Custom React Hooks

• custom-hook-02.js

35. Test a Custom React Hook with renderHook from React Hooks Testing Library

• custom-hook-03.js

36. Test Updates to Your Custom React Hook with rerender from React Hooks Testing Library

• custom-hook-04.js

37. Test React Portals with within from React Testing Library

• portals.js

38. Test Unmounting a React Component with React Testing Library

• unmounting.js

39. Write React Application Integration Tests with React Testing Library

• app-01.js

40. Improve Reliability of Integration Tests using find* Queries from React Testing Library

• app-02.js

41. Improve Reliability of Integration Tests Using the User Event Module

• app-03.js