Slides from my talk about component testing with Cypress at the Test Automation Talks Meetup - 15/07/2021

1. Component Testing
with Cypress
by Walmyr Filho

2. Who am I?
I'm a software craftsman, clean coder,
blogger, YouTuber, Cypress.io ambassador,
online teacher, mentor, speaker, an active
member of the testing automation and
JavaScript communities, and a fan of good
music, tattoos, and skateboarding.
Walmyr Filho

3. 01
02
03
Agenda
Concepts. What's Cypress? What's
component testing? Does
component testing replaces end-to-
end testing?
Step-by-step for:
- Installation
- Configuration
- Writing component tests
- Running component tests
Hands-on:
- Exploring a real project
- Continuous integration, Percy.io
and on Cypress.io's Dashboard
04
Q&A, Testing complex components,
docs, and other references

4. Concepts

5. What's Cypress?
Cypress is a modern testing framework for
anything that runs in a web browser.

6. What's component testing?
Component testing is about testing frontend web
components in isolation.

7. Does component testing replaces
end-to-end testing?
Nope. They complement each other.

8. Step-by-step

9. Installation
npm install --save-dev cypress @cypress/react
@cypress/webpack-dev-server webpack-dev-server

10. Configuration

11. Configuration - part 2

12. Writing component tests

13. Running component tests
npx cypress run-ct (headless mode)
npx cypress open-ct (interactive mode)

14. Hands-on

15. Q&A

16. References
https://docs.cypress.io/guides/component-testing/introduction
https://docs.cypress.io/guides/component-testing/framework-configuration
https://github.com/wlsf82/hackernews
https://glebbahmutov.com/blog/my-vision-for-component-tests
https://github.com/cypress-io/cypress/tree/master/npm/react#examples

17. Thanks!
https://walmyr.dev