Common mistakes in testing UI components and how to fix them in 5 minutes (Vue.js)

Introduction

Photo by Christian Erfurt on Unsplash

UI components testing principles

Vue Component I/O

A “real world” example

RegistrationForm component, you can find the full code here

DOs and DONTs

1. Test the component contract and not the implementation details

Behaviour-driven testing (BDT)

Test a single concept in each test function

Use descriptive sentences when writing test specs

Conclusions

Building nice UI ;)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store