VueConf US 2018


1. State of Vue

Evan You

2. How We Do Vue At GitLab

Jacob Schatz

3. Vue in Motion

Rachel Nabors

4. Testing Vue apps

Edd Yerburgh

5. Serverless Functions and Vue.js

Sarah Drasner

6. vue-rx

John Lindquist

7. Create an Engaging Native Mobile App with Vue and NativeScript

Jen Looper

8. 7 secret patterns Vue consultants don't want you to know

Chris Fritz

9. Agile Design Systems in Vue

Miriam Suzanne

10. Vue & TypeScript: Up and Running

Daniel Rosenwasser

11. A React Point of Vue

Divya Sasidharan

12. Vue & SSR: The best practices

Sebastien Chopin

13. A Short Synopsis of Vue Storybook

Peter Finn

14. Prototyping with Vue Single File Component

Pine Wu

15. 5 Libraries You Should Know About

Adam Jahr

16. Update an Existing Application to Vue

Michael Bennett

17. Vue and Vuex for Complex Application State

Patrick Seda

18. Top 5 Must-Have UI Animation Patterns

Rachel Nabors

19. The Dream: A Full Rewrite

Seth White

20. Start Your Own Vue.js Meetup

Ben Hong

21. Reusability - Is It Worth It?

Shelton Clinard

22. Reactivity - Learning by Accident

Jeff Schenck

23. Quick Publishing of Redistributable SFC on NPM

Mike Dodge

24. OverVue of Vuetify.js


25. Ionic and Vue

Mike Hartington

26. Dynamic Store Modules with Vuex

Adam Bradford

27. Build a MiniFlix Clone with Vue Contest

Dan Zeitman

28. Beyond HTML with Vue

Eduardo San Martin Morote

29. Vue with AWS Lambda

Matt Biilmann

30. 40 Hour Plan For UX Proficiency

Jacob Covey

31. Code Splitting Patterns with Vue

Sean Thomas Larkin
Notify me when new talks are available.

Testing Vue apps

Testing Vue apps

Edd Yerburgh

Edd Yerburgh is a Sofware Engineer at the BBC in London and is also the main author of Vue Test Utils library. As soon as your Vue application gets large you’re going to need to write automated tests to keep bugs away.

Why Test?

  • Check application works correctly - which is very useful on a big team.
  • Provide documentation - so when new developers come to your project they can see how your code works.
  • Easier debugging cycle - so you can find out quickly if you break things.
  • Less bugs - by anywhere from 20 to 80%

Ed recommends following the Front-End testing Pyramid to ensure you’re testing the right things in the right way.

Front-End testing Pyramid

In his talk he discusses what these different kind of tests are and how you can write them in your Vue applications. As you can see the bulk of the tests are unit tests, then snapshot tests to verify the style, and then end to end tests to ensure everything is working together.

End to End Tests (e2e)

This is code that opens a browser, runs through actions, and checks that your app runs correctly. It could look like this:

You might think this is all you need, but it’s difficult to debug, and they can be slow. This is why we need Unit Tests.

Unit Tests

Edd uses Jest to write unit tests. When writing lots of small tests which cover single functions ensures you know where problems lie when they pop up. Unit tests are easy to debug because they focus on one part of your code base. Unit tests are easy to write for Vue components, and Edd does this using a Component Contract.

Component Contract is the API or user interface that your component has. A component contract focuses on the input and output that you expect, treating the component as a black box. Input could be a user action, props, or store, and the output could be rendered output, Vue events, or function calls. They could look like this:

Snapshot Tests

Snapshot Tests take a snapshot of a component, and compare it against the previous snapshot. Edd shows how to use the toMatchSnapshot() syntax in your tests to see if the component html generated is the same. This can safeguard about unintended changes to components, and snapshots are very quick to update.

There’s a great live demo at 16:23, where he shows how to use snapshots.

The Book

Edd wrote a book called Testing Vue.js Applications, and you can get 40% off with the code: ctwvueconfus18.