This document discusses testing Vue components with Vue Test Utils. It explains why automated testing is important to save time and reduce human error. Unit tests allow code to be run in a controlled environment to assert functions produce expected outputs. Vue Test Utils provides tools like mount, shallow, find, and classes to test components. The conclusion recommends using mount moderately, testing pure components, namespacing CSS, refactoring, and valuing one's time.

1. Testando meus componentes com Vue Test Utils
Daniel Santos
Full Stack Developer
Just Digital

2. Daniel Santos - Apache
daniel@justdigital.com.br
@apachetec
instagram.com/apachetec
slideshare.com/apachetec
github.com/daniiell3

4. Por que testar?
"You wouldn’t write the sign-up form, and send it off to your boss
without checking that it works (at least I hope you wouldn’t). No,
you’d manually test it. So, the question isn’t why test. The question
is why use automated testing?" (EDD YERBURGH, 2017, Why
test Vue applications?)

5. Por que testes automatizados?
"There are two big problems when you test your code
manually. The amount time it takes and human error." (EDD
YERBURGH, 2017, Why test Vue applications?)

6. Tempo

7. Tempo
"Flávio, você abriria um posto de gasolina? Posto de gasolina
tem em média 3% de margem, meu tempo vale mais do
que 3% de margem" (FLÁVIO AUGUSTO, 2018,
Ferramentas para avaliar seu negócio)

9. O que é teste unitário?
"Unit tests are a way to automatically check that our code does
what it’s meant to do. We run the code in a controlled environment
and assert that functions produce the expected output." (EDD
YERBURGH, 2017, How to unit test Vue components for
beginners)

10. @vue/test-utils

11. Jest
"We observed that when engineers are provided with ready-
to-use tools, they end up writing more tests, which in turn
results in more stable and healthy code bases."

12. Nativo
const Constructor = Vue.extend(Foo)
const vm = new Constructor().$mount()
Mount/Shallow
@vue/test-utils
const wrapper = mount(Foo)

15. avoriaz
const wrapper = shallow(Foo)
const div = wrapper.first('div')
Find
@vue/test-utils
const wrapper = shallow(Foo)
const div = wrapper.find('div')

16. avoriaz
const wrapper = shallow(Foo)
const div = wrapper.find('div')
FindAll
@vue/test-utils
const wrapper = shallow(Foo)
const div = wrapper.findAll('div')

17. Find by ref
@vue/test-utils
const wrapper = shallow(Foo)
const div = wrapper.find({ ref: ‘title' })

18. avoriaz
const wrapper = shallow(Foo)
const isActive = wrapper.first('div').hasClass('active')
Classes
@vue/test-utils
const wrapper = shallow(Foo)
const classes = wrapper.find('div').classes()

19. avoriaz
const wrapper = shallow(Foo)
const src = wrapper.first('img').getAttribute('src')
Attributes
@vue/test-utils
const wrapper = shallow(Foo)
const src = wrapper.find('img').attributes().src

20. ● WrapperArray
● createLocalVue
● mocks
Algumas das novidades na API do @vue/test-utils

21. OdontoPrev

23. Conclusão:
● Use mount() com moderação
● Pure Components
● CSS Namespace
● Refatoração
● CodeceptJS
● Valorize seu TEMPO

24. Obrigado!!!