A concise and practical guide to unit test your Vue.js components using Jest, the fully featured JavaScript testing framework. Learn shallow rendering, snapshot testing and dependency mocking, among other techniques.

Testing Vue.js Components with Jest

Preface

vue-test-utils , the official VueJS testing library and based on avoriaz , is just around the corner. @EddYerburgh is indeed doing a very good job creating it. It provides all necessary tooling for making easy to write unit test in a VueJS application.

Write the first Vue.js Component Unit Test in Jest

So far, we’ve seen how to use Shallow Rendering to test a component in isolation, preventing the components sub-tree from rendering.

Test Deeply Rendered Vue.js Components

So far we’ve tested using Jest Snapshots . In most cases that’s what we’ll use, but sometimes we want to assert something more specific.

Test Styles and Structure

There are different ways to test properties, events and custom events.

Test Properties and Custom Events

Computed properties and watchers are reactive parts of the logic of Vue.js components. They both serve totally different purposes, one is synchronous and the other asynchronous, which makes them behave slightly different.

Test Computed Properties and Watchers

What should we test in methods? That’s a question that we had when we started doing unit tests. Everything comes down to test what that method do, and just that . This means we need to avoid calls to any dependency , so we’ll need to mock them.

Test Methods and Mock Dependencies

Slots are the way to make content distribution happen in the web components world. Vue.js slots are made following the Web Component specs , meaning that if you learn how to use them in Vue.js, that will be useful in the future ;).

Test Vue.js Slots

The module managers we have in the JavaScript community, mainly ES Modules and CommonJS, don’t support project-based paths. They only support relative paths for our own modules, and paths for the node_modules folder. When a project grows a bit, it’s common to see paths such:

Enhance Jest configuration with Module Aliases

So far, you’ve seen how you can test Vue.js component’s structure, styles, methods, computed properties, events, watchers, and more. And you’ve learnt to do that using different techniques and methods.

Community Questions