Unit Testing Vue Apps: Tips, Tricks, and Best Practices

Beth Qiang presents “Unit Testing Vue Apps: Tips, Tricks, and Best Practices” at VueConf US 2022. For more vue js unit testing tutorials, check out our courses 👉 www.vuemastery.com/courses
Ready to master Vue.js? With weekly Vue js tutorials on the latest topics, and exclusive content with Evan You (the creator of Vue), Vue Mastery is the ultimate learning resource for Vue developers to level-up their skills. Watch more free Vuejs tutorials 👉 www.vuemastery.com/courses
0:09 Introduction
1:26 Why Unit Test
2:26 What to test
5:33 How to write tests
7:53 Scaffolding
12:43 Tools
17:21 Real Tests

[@RalphHarrer]

Thanks for that talk! It gives a really great overview of how to get started and how to test properly! Well done. Helped me a lot.

[@_the_one_1]

WOW! Amazing talk! Nevet thought of writing tests like this. Thank you

[@danielgolden6991]

This talk is so helpful (thank you!)
Aren't the colors of buttons also implementation details?

[@geekmaros]

Great insight into Testing

[@devincit]

Nice presentation with actually great examples of how to write descriptions of the tests. Most of the tests are written in implementation agnostic way! Not everyday you see those.
8:20 - 9:28 Those are not unit tests. it's a mish mash of behaviour and integration testing, maybe there are some unit tests. Later examples are the same: lot's of bahaviour/integration testing.
If you are testing the reaction for user interaction (clicking the button) it's not a unit test. Unit test would be just testing the callback method used by the event listener. Just my opinion.
18:46 there are much better ways to do that. You can generate TypeScript interfaces from swagger files or openapi files. Then you have not only documentation of contracts, but also you can use those to create mocks even when the endpoint isn't no yet complmeted or deployed. Also using generated interfaces create guards on contracts itself. If the backend modifies request or response contract builds will fail. No need for further automated testing.
19:59 It's a lot of mocking for just unit testing. It just confirms my previous concern that these tests are not unit tests
28:40 I believe that mocks-server and json-server have the ability to make real api calls and then cache them. Probably there was another tool, but I can't remember. Last time we used mocks generated by backend tools - some library for dotnet that generated responses based on types.
Thera are also tools for generating json’s, so if you have swagger or openapi files, you can generate schemas and than payloads/responses from them.

[@wobsoriano]

One thing I notice when unit testing components is that it turns immediately into an integration test.

[@devincit]

​@@wobsoriano there is no other way. but it's fine. just need to understand and accept that and that unit testing for frontend applications is almost useless. only few cases where it make sense

[@josephjoestar4318]

@@devincit Thanks, this helps ease my mind a little. It really does feel absurd to try and test everything in isolation.
For the moment I'm integration testing pages - and - unit testing components with prop drilling.

[@NaLoPe24]

Isn't your concern exactly why the Vue docs call this component testing and not unit testing?

[@josephjoestar4318]

This filled in all the holes that I had been missing.