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

  Рет қаралды 13,014

Vue Mastery

Vue Mastery

Күн бұрын

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...
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...
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

Пікірлер: 10
@RalphHarrer
@RalphHarrer 2 жыл бұрын
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.
@devincit
@devincit 2 жыл бұрын
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
@wobsoriano 2 жыл бұрын
One thing I notice when unit testing components is that it turns immediately into an integration test.
@devincit
@devincit 2 жыл бұрын
​@@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
@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
@NaLoPe24 8 ай бұрын
Isn't your concern exactly why the Vue docs call this component testing and not unit testing?
@josephjoestar4318
@josephjoestar4318 Жыл бұрын
This filled in all the holes that I had been missing.
@_the_one_1
@_the_one_1 2 жыл бұрын
WOW! Amazing talk! Nevet thought of writing tests like this. Thank you
@danielgolden6991
@danielgolden6991 Жыл бұрын
This talk is so helpful (thank you!) Aren't the colors of buttons also implementation details?
@geekmaros
@geekmaros 2 жыл бұрын
Great insight into Testing
The Future of Nuxt 3
29:52
Vue Mastery
Рет қаралды 7 М.
Test driven development with Vue.js by Sarah Dayan
31:07
VueConf Toronto
Рет қаралды 35 М.
Yay, My Dad Is a Vending Machine! 🛍️😆 #funny #prank #comedy
00:17
Human vs Jet Engine
00:19
MrBeast
Рет қаралды 170 МЛН
버블티로 부자 구별하는법4
00:11
진영민yeongmin
Рет қаралды 29 МЛН
Building Accessible Vue Components
41:03
Vue Mastery
Рет қаралды 6 М.
The Joy of Testing by Victor Rentea
2:45:36
Devoxx
Рет қаралды 7 М.
7 ways to make your Vue unit tests better by Natalia Tepluhina
25:44
VueConf Toronto
Рет қаралды 9 М.
Dissecting the Pinia Source Code
20:34
Vue Mastery
Рет қаралды 6 М.
Vue Testing with Vue Test Utils
1:19:23
Laith Academy
Рет қаралды 47 М.
Mobile Development in Vue
17:52
Vue Mastery
Рет қаралды 12 М.
Stop Writing So Many Tests
10:02
Web Dev Simplified
Рет қаралды 93 М.
Mock vs Spy in Testing with Jest: Which is Better?
25:12
Dev tips by MoHo
Рет қаралды 12 М.
Stress-free Testing for Vue
41:54
Vue Mastery
Рет қаралды 5 М.