Testing Async Components
summary
Shows concrete recipes for testing async React components: replace a 200ms debounce by fake timers or by rewriting the test as async and using findBy queries / waitFor instead of manual advances. Covers mocking window.fetch, creating an api.js wrapper, or using Mock Service Worker or Mirage to fake network responses, and shows using Cypress + testing-library plugin with cy.intercept for end-to-end paths. Demonstrates when each approach simplifies asserting resolve and reject flows.
AI-written summary · about
chapters (7)
- 0:00Intro
- 0:34Component Testing 101
- 1:42Sources of Asynchronicity
- 2:15Dealing with Timers
- 6:47Dealing with Promises
- 7:40Dealing with The Network
- 12:00Testing in a Real Browser (Cypress)
related talks
19mModern Testing Strategies for Reactive Applications
53mTesting React Applications
25mAngular + Jest: Testing Titbits
14mTestable React Components
19mTesting Best Practices for Angular Applications
49mFront-end Testing on Steroids
19mWhy you should Jest use Cypress for React component testing
45mReactive Testing Strategies with NgRx