Utilities for testing Vue.js components using Jest
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
test
types
.gitignore
.travis.yml
LICENSE
README.md
package.json
tsconfig.json
tsconfigDist.json
tslint.json

README.md

vue-jest-utils Build Status npm version

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