Vue.js Testing Resources

Found a few helpful resources on testing applications running the Vue framework. Logging here for reference, because I have too many tabs open.

Vue Testing Handbook
https://lmiller1990.github.io/vue-testing-handbook/setting-up-for-tdd.html#making-assertions

Vue Test Utils
https://vue-test-utils.vuejs.org/installation/#using-vue-test-utils-with-jest-recommended

North 47 KB Article -- Vue 2 and Jest Testing
https://www.north-47.com/knowledge-base/starting-with-unit-testing-using-vue-js-2-and-jest/

TestDriven.io -- Guide to Unit Testing Vue Components
https://testdriven.io/blog/vue-unit-testing/

Digital Ocean Tutorial -- How To Test Vue Components with Jest
https://www.digitalocean.com/community/tutorials/vuejs-vue-testing

Doximity Article -- Five Traps to Avoid While Unit Testing Vue.js (2017)
https://technology.doximity.com/articles/five-traps-to-avoid-while-unit-testing-vue-js

Testing Library -- jest-dom
https://github.com/testing-library/jest-dom

Vue.js The Most Fundamental Idea

Vue.js is Declaritive

Declaritive programming -- From Wikipedia:

... declaritive programming is a programming paradigm that expresses the logic of a computation without describing its control flow.

In more straightforward terms, declaritive programs say what should happen, rather than how it should happen.

In contrast, imperitive programming specifically lists the steps to perform a function.

Vue.js Declaritive Manifestion

Rather than, for example, using vanilla Javascript to step-by-step: find objects in the DOM, update those objects, etc. -- Vue.js takes a simplified, abstracted approach.

  1. Modify HTML tags and structure with special attributes.
  2. Use Vue.js to apply functionality to the HTML with abstracted functions.

An Example of Vue.js Declaritive Rendering

Extracted directly from the guide at vuejs.org -- this example provides a most basic demonstration of declaritive rendering.

HTML

<div id="app">
  {{ message }}
</div>

JS

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

The "declartive'" part of declaritive rendering is written into the HTML of the example.

In English, it says:

"Put the message into the app"

The accompanying Javascript carries out the duties of making it happen.