Skip to content

alexjoverm/vue-testing-series

Repository files navigation

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.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published