Examples of Vue.js Component Unit Testing

This repository contains code examples written for the series of articles “Unit Testing Vue.js Components with the Official Vue Testing Tools and Jest” by Alex Jover.

Getting started

We assume you're already familiar with Vue.js framework and a concept of unit testing.

You might also want to have a look at the testing tools that we're going to use in this series: vue-test-utils (an official test library for Vue.js) and Jest (testing framework developed by Facebook).

Preparing and running tests

To run the code from this repository and build the application use the following commands in your terminal:

# clone the repository
git clone [email protected]:alexjoverm/vue-testing-series.git

# change the folder
cd vue-testing-series

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# run tests once
npm t

# run tests in watch mode to monitor what breaks as you change the code
npm t -- --watch

Build Setup

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For the detailed explanation of how things work, check out the Vue.js Templates guide and docs for vue-loader.

Lessons

The structure of this repository follows the structure of the book, where each lesson is represented in a separate branch.

Here is the full list of lessons:

1. Write the first Vue.js Component Unit Test in Jest
   GitHub branch

2. Test Deeply Rendered Vue.js Components in Jest
   GitHub branch

3. Test Styles and Structure of Vue.js Components in Jest
   GitHub branch

4. Test Properties and Custom Events in Vue.js Components with Jest
   GitHub branch

5. Test Computed Properties and Watchers in Vue.js Components with Jest
   GitHub branch

6. Test Methods and Mock Dependencies in Vue.js with Jest
   GitHub branch

7. Test Vue.js Slots in Jest
   GitHub branch

8. Enhance Jest configuration with Module Aliases
   GitHub branch

9. Snapshot Testing
   GitHub branch

Next steps

Do you have any questions regarding these lessons? Feel free to write a comment under each of them. If you like the course, please share it on social media or with your colleagues.

You can also follow Alex Jover videos on Egghead or on twitter as @alexjoverm.