vue-jest-utils

Utilities for testing Vue.js components using Jest.

While written in TypeScript (and thus including type definitions), it can also be used in a pure JavaScript environment.

Disclaimer: this project is currently very much work-in-progress. The motivating use case is simplifying snapshot testing using a combination of Vue.js, TypeScript, Jest, and html2jade. Additional functionality will be added as needed and breaking API changes may happen before releasing 1.0. Contributions are more than welcome.

Usage

Install: npm install --save-dev vue-jest-utils

Note: Vue.js 2.0 and Jest must be installed as well.

To use Jest with Vue.js single-file components (*.vue) or TypeScript sources, follow the guide on vue-typescript-jest.

For a complete example of a TypeScript/Tsify/Vue.js/Vueify/Pug setup supporting Hot Module Replacement and unit/snapshot testing with Jest, cf. vue-typescript-component-example.

Examples

JavaScript Test Example

const Vue = require('vue')
const VJU = require('vue-jest-utils')
 
const CounterJs = require('../src/counter-js.vue')
 
describe('counter-js.vue', () => {
    it('should just work', () => {
        const vm = new Vue({
            el: document.createElement('div'),
            render: (h) => h(CounterJs),
        })
        VJU.clickNthButton(vm.$el, 1)
        VJU.clickNthButton(vm.$el, 3)
        VJU.clickNthButton(vm.$el, 2)
        // return a Promise that
        // 1. calls vm.nextTick()
        // 2. checks the snapshot of vm.$el using html2jade
        return VJU.expectToMatchSnapshot(vm)
    })
})

TypeScript Test Example

/// <reference path='../../node_modules/@types/jest/index.d.ts' />
 
import Vue = require('vue')
import {expectToMatchSnapshot, clickNthButton} from 'vue-jest-utils'
import CounterTs = require('../src/counter-ts.vue')
 
describe('counter-ts.vue', () => {
    it('should just work', () => {
        const vm = new Vue({
            el: document.createElement('div'),
            render: (h) => h(CounterTs),
        })
        clickNthButton(vm.$el, 1)
        clickNthButton(vm.$el, 3)
        clickNthButton(vm.$el, 2)
        // return a Promise that
        // 1. calls vm.nextTick()
        // 2. checks the snapshot of vm.$el using html2jade
        return expectToMatchSnapshot(vm)
    })
})

Contributing

Contributions including bug reports, tests, and documentation are more than welcome. To get started with development:

# once: install dependencies
npm install
 
# run unit tests in watch mode
npm test -- --watch
 
# lint & test
npm run prepublish

License

MIT