Automation Testing for React

on YouTube ↗51m

" summary

Workshop shows step-by-step setup of a Selenium WebDriver automation framework for a React contact-list app and runs create edit delete flows as concrete tests. Compares WebdriverIO (rich drivers, heavier config, occasional server shutdown), Cypress (zero config, Chrome-only, built-in video and debugger), and Jest + Puppeteer (fast unit-style tests). Recommends using data-test-id selectors, follows TDD red/green/refactor cycle, and shares reusable code samples and config used to run tests and CI.

AI-written summary · about

" chapters (21)

1. 0:00Introduction
2. 1:06Write tests for projects
3. 3:56Good test challenges
4. 5:38Testing pyramid frameworks
5. 7:23Test-driven development workflow
6. 9:30Effective test suite qualities
7. 13:37Selecting elements in E2E
8. 16:28React component testing
9. 18:57Demo app overview
10. 20:22WebDriver IO framework
11. 23:28Setup WebDriver IO tests
12. 26:18WebDriver IO test spec
13. 32:45WebDriver IO pros and cons
14. 33:51Cypress framework
15. 35:15Setup Cypress tests
16. 37:26Cypress test spec
17. 41:28Cypress debugging
18. 44:01Jest and Puppeteer
19. 45:02Run Jest and Puppeteer tests
20. 46:32Compare testing frameworks
21. 47:36Q&A

" related talks

• 01h 00mTest Driving React ApplicationsVenkat Subramaniam · Great International Developer Summit 2023
• 29mShifting-left and Right to Test a web app with CINikolay Advolodkin · OpenJS World 2021
• 53mModern Web Testing: Going Beyond SeleniumDmitry Vinnik · GeeCON 2019
• 18mTesting React in a Right WayVarik Matevosyan (Arm) | ReactConfAM19 · React Conf Armenia 2019
• 41mDesign Decisions for Perfect JavaScript Testing FrameworkMichael Bodnarchuk · TestCon Europe 2019
• 55mModern Web Testing: Going Beyond SeleniumDmitry Vinnik · NDC Minnesota 2019
• 45mEnd to End testing React applicationsForbes Lindesay · React Alicante 2017
• 32mCrafting a Bulletproof testing pipeline for React AppsLudovico Besana · reactjsday 2025