Vue and Vue-Testing-Library

Photo by Christian Holzinger on  Unsplash

I am a huge fan of TDD (Test Driven Development) and I really suggest everyone practice it or, at least, give it a try with some kata or small exercise.

Today, with the latest UI frameworks supported by related testing libraries, TDD is way easier than before and it actually helps a lot defining, catch and test possible components’ scenarios.

I clearly saw the benefits of these practices while testing React components with Enzyme (at really early stages of those libraries). If components are easy to test (and layout scenarios), you are on a good path.

In my career, I have been through lots of Unit Tests with different UI technologies, approaches, processes, and practices.

Having a look at the picture below, you might see that Unit Tests should be the foundation of a testing strategy. Why? One of the reasons, they are quick and they can be isolated.

Mike Cohn’s concept. The picture was taken from https://martinfowler.com/articles/practical-test-pyramid.html

In this article, I would like to demonstrate a way that might help our test code being more flexible and, more importantly, follow an End-User approach (instead of a developer approach ).

Vue and Vue/Test-Utils is a great combination! I really like it and it’s really easy to test components with pass-in props, stores and much more. I really recommend those technologies and check these two resources out (first is the official page for Vue/Test-Utils while the second is a collection of UT-TDD practices/solutions for Vue —amazing):