20200313_End-to-End Testing Vue Apps with Cypress by Amir Rustamzadeh

A practical combination of end-to-end (E2E) tests and direct component tests can provide us with a high level of confidence in the functional quality of our apps. Cypress, an open-source (MIT license) testing tool, is one way to reliably execute such tests within real-browsers with minimal friction and surprising ease. Testing real-world web applications in real-browsers has historically been a difficult task. It’s no surprise that testing often becomes an after-thought or completely skipped. With traditional approaches test tool setup, writing tests, debugging tests, resolving failures, handling flakiness, configuring automated pipelines, and waiting on long CI jobs contribute layers of friction that make this state-of-affairs difficult to overcome. Cypress aims to remove or minimize these pain-points while providing a develop-friendly experience that dares to actually make testing enjoyable. We’ll take a step-by-step approach and demonstrate various methods and techniques we can utilize to test real-world Vue apps (that include Vuex and Vue Router). Then we’ll check-out cypress-vue-unit-test, an up-and-coming component testing library, and explore robust implementations of test-coverage and visual testing. You’ll walk away with an increased level of confidence in shipping high-quality Vue apps.