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

Показать описание

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

Vue Mastery

Рекомендации по теме

Комментарии

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.

RalphHarrer

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.

devincit

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

_the_one_

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

josephjoestar

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

danielgolden

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

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

Unit Testing Vue 3 | What to test?

The ONLY REASON To Unit Test

[Testing Vue 3 apps] 1.0 - Getting Started with Vue Test Utils

Using Vue Test Utils in Vitest

Stop Writing So Many Tests

[Testing Vue 3 apps] 1.1 - Working with Props

7 ways to make your Vue unit tests better by Natalia Tepluhina

[Testing Vue 3 apps] 1.11 - Mocking HTTP calls with Jest

#33 - Unit Testing Setup & Basics - Vue 3 (Options API) Tutorial

Learn Vitest and Testing Library In 40 Minutes

Unit Test in Vue 3 | Automated testing | Vitest

[Testing Vue 3 apps] 1.7 - Using the Composition API

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

[Testing Vue 3 apps] 1.13 - Testing Emitted Events

Quickly Test your Apps with Vitest

Test Vue Components & Pinia Stores with Vitest 🍍

Why I Don’t Unit Test

Nesting 'If Statements' Is Bad. Do This Instead.

Fast Unit Testing With Vitest

7 ways to make your Vue Unit tests better by Natalia Tepluhina: Vue.js Nation 2022

7 ways to make your Vue unit tests better | Natalia Tepluhina | vueday 2023

[Testing Vue 3 apps] 1.5 - Triggering events and nextTick

Vue Unit Testing #10 - Select component test (refactoring)