How to successfully test React apps to speed up development / Using Cypress

Stop getting midnight calls because you broke the site on the last deploy: use Cypress for front-end testing! In this episode we talk about how we use the free, open-source testing framework Cypress to save time, catch bugs, and sleep better at night.

Links

Show Notes

What is integration testing?
What are other types of testing?
- Unit
Story Time, life without good tests
- Stories about poorly written tests
Problem: new features get priority over testing
Good tests with good coverage speeds up development!
- I always write tests before refactoring because you can go wild and know that all you have to do is get the tests to pass in the end
- Good tests give confidence: you can write new features/code a lot more quickly because you don’t have to think about breaking things, if somethings breaks you’ll know and you can fix it
- Infrastructure investment: it’s like investing in better roads and transportation networks, it has an upfront cost but you can move people and goods faster and more efficiently afterwards
Solution: new features priority over testing
- Estimates include testing
- Don’t demo until you have tests if demoing puts on pressure to finish before you wrote tests
What to test? / Testing priorities?
- Integration first (ensures things actually work for the end-user)
- Then unit
What is Cypress used for?
- Integration Tests
- Unit Tests
What makes Cypress best suitable for the task?
- Fast
- Consistent
- Screenshots, videos, logs
- Network request spies, spoofing
- CI Integration
- Dashboard
What I don’t like about Cypress:
- Async API
  - Maybe necessary for this because of JS?
Successfully Maintaining Tests?
When to write tests?
Cypress tips & tricks
- Custom commands
- Capturing values
  - Example: capture a numeric value, do test, check that the new value is correct based on old one

Support the show

About

[36] How to successfully test React apps to speed up development / Using Cypress