Frontend Testing — Full Course Syllabus

Unit, integration, and end-to-end testing for frontend applications with Jest and React Testing Library.

1. 1. Setting up Jest for unit testingInstalling and configuring Jest for a JavaScript/TypeScript project and basic test script.
2. 2. basic test case (test/it + expect)Using test or it with expect to write a simple unit assertion in Jest.
3. 3. React Testing Library: render()Rendering React components in test environments using RTL's render function.
4. 4. RTL queries: getByText, findByRole, getByTestIdUsing RTL query methods to find elements in a rendered component for assertions.
5. 5. Test-driven migrationUsing tests to lock in behavior before refactoring or converting modules to TypeScript.
6. 6. Unit testing basicsWriting unit tests for small functions or components to verify isolated behavior.
7. 7. Snapshot testingCapturing serialized output and comparing it across test runs with Jest snapshots.
8. 8. user-event vs fireEventDifferences between user-event (higher-level) and fireEvent (low-level) for simulating interactions.
9. 9. Testing async UI updates with waitFor and findBy*Techniques to test async UI changes using waitFor and async queries.
10. 10. Mocking fetch and XHRStubbing network requests in tests using global.fetch mocks or libraries like msw.
11. 11. msw basics (service worker mocking)Using Mock Service Worker for realistic network mocking in unit and component tests.
12. 12. Typing Jest mocks in TypeScriptCorrectly typing jest.fn, jest.Mocked, and mocked modules to get type-safe tests.
13. 13. testing-library typings: JSX.Element vs ReactElementType considerations for render return types and container when authoring TS tests.
14. 14. Keeping tests fast with Jest workers and --runInBandJest options and patterns to keep test suites performant during incremental migration.
15. 15. CI: TypeScript type-check + Jest testsRecommended CI steps to run tsc --noEmit and Jest tests, plus caching suggestions.
16. 16. end-to-end vs unit test boundariesDeciding which behaviors should be covered by fast unit/component tests versus E2E tests.
17. 17. ts-jest vs swc-jest for running TypeScript testsTrade-offs between ts-jest and swc-jest for running TypeScript tests.
18. 18. jest.spyOn()Using jest.spyOn to observe calls to an existing object method without replacing it.
19. 19. jest.config.js / jest.config.tsKey Jest configuration options and integrating TypeScript transformers like ts-jest or swc-jest.
20. 20. Automated integration testing for microfrontendsTesting the assembled UI surface of multiple microfrontends with end-to-end and contract tests.
21. 21. Integration testing basicsWriting tests that verify interactions between multiple modules or services.
22. 22. End-to-end (E2E) test planning: identifying critical user journeysIdentifying critical user journeys to cover with end-to-end tests.
23. 23. Test data managementCreating and managing deterministic test data fixtures for reliable tests.
24. 24. Automated test run (CI) basicsConfiguring a simple continuous integration workflow to run tests on each push.
25. 25. Type-checked tests (expectType, tsd)Techniques and tools to assert types in tests, like expectType helpers or tsd for declaration tests.