How to Add Component Tests to Web Apps

What are component tests? How do they relate to e2e tests? Do they improve a11y? Ely Lucas will teach us all about them and how we can add component tests using Cypress to a React app. 00:00:00 - Welcome 00:00:20 - Who is Ely Lucas? 00:03:56 - How does Cypress fit into the modern web dev stack? 00:09:26 - Can Cypress let us know when we’ve broken our UI? 00:17:11 - What is component testing? 00:20:31 - Starting out with Cypress 00:26:45 - Choosing End to End or Component Testing 00:29:49 - Configuration files explained 00:33:32 - Tests written in mocha 00:37:29 - What is worth testing? 00:49:36 - Creating an interface 01:10:21 - Building a login form 01:15:46 - Submitting the form 01:27:46 - Where can people find out more about Cypress? Repo: https://github.com/learnwithjason/cypress-component-testing-react Links https://twitter.com/elylucas https://www.learnwithjason.dev/ https://www.cypress.io/ https://docs.cypress.io/ https://learn.cypress.io/ https://www.learnwithjason.dev/schedule Watch future episodes live at https://twitch.tv/jlengstorf This episode was sponsored by: - Netlify (https://lwj.dev/netlify) - Nx (https://lwj.dev/nx) - Backlight (https://lwj.dev/backlight) Live transcription by White Coat Captioning (https://whitecoatcaptioning.com/) Credits: Local Elevator by Kevin MacLeod is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/by/4.0/) Source: http://incompetech.com/music/royalty-free/index.html?isrc=USUAN1300012 Artist: http://incompetech.com/ Busybody by Audionautix is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/by/4.0/) Artist: http://audionautix.com/ Additional sound effects obtained from https://www.zapsplat.com