Module introduction

In this module, we'll be unit testing our Vue.js app components. There are two libraries we'll be using for this: Jest and Vue Test Utils.

Jest, firstly, is a test framework for JavaScript that includes many features we need for frontend testing like a test runner, assertion library, module interceptor, and so on.

Something Jest doesn't include, though, is a way of testing Vue component output, which is why we use Jest in conjunction with Vue Test Utils. This latter library allows us to mount and render Vue components in isolation from a complete Vue app.

Component tests

After we've covered the key concepts of Jest and Vue Test Utils, we'll learn how to design effective component unit tests by creating tests for a variety of our PrintBay components.

Using mocks

We'll then learn how to use mocks, stubs, and spies, in our component tests. Mocks and stubs provide a way of replacing more complex dependencies to simplify our tests and keep our components isolated, while spies offer an alternative way to test component functionality.

Snapshot tests

tests/unit/client/views/snapshots/Home.spec.js.snap

Next, we'll learn a special component testing method called "snapshot testing" that can be used to ensure the rendered markup of a component is stable.

Vuex ORM

Once we've covered component testing, then we'll look at another important type of unit testing for a Vue.js app, which is testing our Vuex store.

Checking out code

Before we begin coding, be sure to checkout the module 8 starter code by going to the terminal and typing:

$ git checkout module_08_start
$ npm i