vue-test-component-wrapper v0.1.1

Vue Test Component Wrapper

Introduction

It is a Vue.js test utility based on an implementation which I use in my daily work, inspired by the official Vue.js Test Utilities.

Am I reinventing wheel? Well, yes and no.

Yes, because both of the test utility libraries are doing the same thing, make the unit test of Vue.js component easier. No, because two libraries are taking different approaches.

I'd like to keep the implementation of the Vue Test Component Wrapper as simple as possible, and as close to the DOM as possible. Most of the utility methods are just one layer above DOM. It is also easy to be extended, one can add more utility methods to fit different needs of different projects.

Note that, this is currently only one of my hobby project, the quality and the compatability cannot match the official test utilities library, so use it with cautious. If you have any improvement ideas, or have found any bugs, please create an issue, and I'll find time to improve it.

Setup

Since the artifact of this library is JavaScript ES6 source code (instead of transpiled), first thing to do is to configure babel to transpile it. Assuming we are using webpack configuration generated by vue init webpack:

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [
          resolve('node_modules/vue-test-component-wrapper/src')
          // Other includes ...
        ]
      }
      // Other rules ...
    ]
  }
  // Other configurations ...
}

Configuration

To configure VueTestComponentWrapper, simply add this to the start-up script of the unit test:

VueTestComponentWrapper.config.set({
  router: {
    // Test support for vue-router is enabled
    enabled: true,
    // The mocked router returned by will be inject to the vue component
    createRouterMethod: () => new Router({})
  }
})

Basic Usage

Test the vue component generated by vue init webpack:

import VueTestComponentWrapper from 'vue-test-component-wrapper'
import HelloWorld from '@/components/HelloWorld'

describe('HelloWorld.vue', () => {
  it('should render correct contents', async () => {
    const wrapper = await VueTestComponentWrapper.mounted(HelloWorld)
    expect(wrapper.getTextContent('.hello h1')).to.equal('Welcome to Your Vue.js App')
  })
})

Currently the API documentation is not ready yet. You can find more utility methods defined in /src/mixins, usually they are quite straight forward.