Testing in Frontend World

on YouTube ↗35m

" summary

Argues for a concrete frontend testing pyramid and shows what to run where: start with linting (ESLint auto-fix), then fast unit tests (Mocha/Jest), then component testing with Storybook plus snapshot tests and Enzyme for interaction, visual checks with Gemini/WebdriverIO and full E2E via Protractor or webdriver-based suites. Gives concrete numbers (three tests run in ~150ms, thousands slow CI), demonstrates Storybook stories and snapshot failures, and stresses CI integration (Travis/GitLab/Jenkins) for repeatable runs.

AI-written summary · about

" chapters (16)

1. 0:00Introduction
2. 1:47Why frontend testing
3. 4:53Frontend testing types
4. 6:20New testing pyramid
5. 8:29Testing structure and principles
6. 9:54FIRST principles for unit tests
7. 13:48Test writing theory
8. 14:11Linting as first step
9. 17:07Unit testing specifics
10. 18:51Component testing with React
11. 21:20Storybook for visual tests
12. 23:06Component interaction testing
13. 25:14Visual testing with screenshots
14. 26:59Integration testing in frontend
15. 28:47Final testing pyramid
16. 31:20Q&A

" related talks

• 26mModern Testing Practices in Frontend ApplicationsDan Neciu · JSworld Conference 2023
• 50mFrontend-as-a-Service Automated Testing: Layers and CI PipelinesDzmitry Prakapuk · DelEx Conference 2020: DevOps & Test Automation
• 38mModern Web Testing: Going Beyond SeleniumDmitry Vinnik · Voxxed Days Frontend Bucharest 2019
• 53mModern Web Testing: Going Beyond SeleniumDmitry Vinnik · GeeCON 2019
• 49mFrontend Testing: Mapping Out the TerritoryGil Tayar · Build Stuff 2021
• 32mMake backend devs jealous of your test suiteCarly Litchfield · AgentConf 2018
• 49mFail Fast Approach in Frontend DevelopmentVitali Lashchanka · RS Conf 2019
• 26mImplementing a test suite in an existing Frontend applicationMirjam Bäuerlein · JSWorld Conference 2021