Vue.js Testing: A High Level Overview

Testing in Vue.js is easy. But there isn't much guidance available. This post won't tell you how to write tests for Vue.js, but it will cover the role each of these packages play in testing your code so that you have a good beginning level of understanding about what is happening.

You can run your test with npm run test. Although npm is the JavaScript package manager, it can be used here as a shortcut method to avoid typing longer commands. All of the commands available are defined in the package.json file in the root directory of your Vue project.

A tool used in testing with Vue.js is Karma. Karma is a test runner, which means you need to find another test framework and Karma will run those tests. Adapters exist for most of the major JS testing frameworks.

Karma is essentially a tool which spawns a web server that executes source code against test code for each of the browsers connected.

The testing framework you should use is Mocha, in which you write tests like this:

But the above is need of an another tool to give us assert. Node actually provides some basic assertions. Also, the webpack template goes with the Chai assertion library.

Sinon.js is a vital tool when writing JavaScript unit tests. To learn more about Sinon read this article and learn when to use each different tool. But Sinon also gives some specialized tooling for faking calls back to the server. It can come handy when you might need to mock API calls at some point.

Any sufficiently advanced technology is indistinguishable from magic

Vue.js Testing Overview by Matthias Hager