e2e testing - Testing React apps

Transcript

2. e2e testing Marko Arsić Independent Tech Consultant / Senior software developer / Lecturer
3. Modern JavaScript frameworks present an easier and more organized way to create web applications They also add complexity that sometimes breaks things in a subtle yet impactful way
4. To ensure we don’t introduce more bugs than we fix, we can turn to automated frontend testing
6. Until now, end-to-end testing wasn’t easy It was the part developers hated
7. Selenium and similar tools were designed to test applications that require a full-page refresh—supporting SPAs with Ajax data fetching was an afterthought Issues with timing and flakey tests
8. E2E testing—testing functionality as close as possible to a real user in an automated fashion.
9. Integration testing—testing the interaction between two or more units of code. For instance, checking the API responds as expected when it is called. This invokes all the layers of functionality from the HTTP request to the database request and back
10. Unit testing—testing one unit of code in isolation. Given an input, it responds with proper output.
12. Start with the E2E test first and testing the happy path (no edge cases)
13. If there is an API change, you should write an integration test covering at least the happy path and one primary sad path (e.g. record is found and returned, and record not found).
14. Finally, if there is a lot of branching logic (i.e. conditionals, loops, etc.) that might not get executed by the former two testing levels, you should write the unit tests
15. Every feature that ships to real users should be covered by End-to-End tests using Cypress.io at a minimum. Ideally, you’d also have integration and unit tests with Jest on the client side and your backend language testing framework
16. These are the tests you should have: • End-to-End tests—high-level tests of the green paths (everything going right) and a select few red paths (where one or two things go wrong). • API request tests—sending a request to your API and expecting a specific result. • Frontend unit tests—unit tests for things like components rendering, library code helpers, state transition code, etc.
17. End-to-End tests using Cypress.io, where tests will act like a real user
18. You can think of Cypress.io as the Redux of automated testing, with features like time travel, diff-ing of current and previous state, live code reloading, and much more. You can even use all the debugging tools you know and love with Chrome (even installing additional tools like React Dev Tools and Redux DevTools).
21. All of Cypress’s functionality is available under the global cy object you can see above. There is no need for any async/await or any asynchronous non-sense. Tests execute one step at a time, waiting for the previous step to complete.
22. There are functions to retrieve DOM elements like get() as well as to find text on the page using contains()
23. You can write the tests in Behaviour Driven Development style and focus on the high-level actions the user is performing like login/logout using standard JavaScript functions to hide the details
24. PERSONAL OPINION Cypress is the new standard in front-end testing that every developer and QA engineer needs
26. Thanks Marko Arsić email: marko@arsic.xyz twitter: @mArsic
27. coding, learning, & leveling up one day at a time