Test Driving a React.js UI Component with Jasmine

on YouTube ↗47m

" summary

A walkthrough that actually builds a Disqus‑style comment component and shows it working with passing tests, not just slides. Code is on GitHub and the demo uses 100% test driven development for a React.js UI component, exercising sorting by likes and timestamp, private drafts, likes, and periodic refresh. Tests run in real browsers via React.js + Jasmine + Karma + webpack + Babel, with Enzyme for component assertions and jasmine ajax/spies to stub requests. About 32 tests run and coverage is reported.

AI-written summary · about

" chapters (17)

1. 0:00Introduction
2. 1:01ObjectOriented Programming
3. 1:28Hierarchy of Objects
4. 1:48Classic Debates
5. 3:26Object Orientation
6. 4:50Convention
7. 5:15Recap
8. 8:26Demo
9. 10:38Commercial Break
10. 11:47Reactjs UI Component
11. 19:05Reactjs Comments
12. 21:33Reactjs Component
13. 23:24Single Comment Test
14. 26:18React Basics
15. 28:38Doubts
16. 35:31Unit Tests vs Component Tests
17. 40:21Spying on Ajax Calls

" related talks

• 01h 00mTest Driving React ApplicationsVenkat Subramaniam · Great International Developer Summit 2023
• 19mWhy you should Jest use Cypress for React component testingTyler Graf · UtahJS Conf 2023
• 10mTesting React ApplicationsMary Snow · Assert(js) 2018
• 51mAutomation Testing for ReactAram Kocharyan · Testing Talks Conference 2019 Melbourne
• 53mTesting React ApplicationsHans-Christian Otto · iJS London 2019
• 14mTestable React ComponentsJulia Gao · React Rally 2015
• 30mTesting React ApplicationsJack Franklin · React Amsterdam 2016
• 29mTest-Driven Development with JestDavid Demirkhanyan, Narek Ghevondian · JavaScript Conference Armenia 2018