vue-test-util一些笔记

the official unit testing utility library for Vue.js

now using vuejs-cli!!!!--It's now recommended to scaffold your project with Vue CLI 3 which provides out-of-the-box configurations for unit testing.

为什么要

01.已有方案
02.方便快速
03.借鉴参考

它是什么

the official unit testing utility library for Vue.js

如何使用

安装软件

::<<eof
npm install --save-dev vue-test-utils
eof

基本结构

::<<eof
# 创某组件
// counter.js
export default {
  template: `
    <div>
      <span class="count">{{ count }}</span>
      <button @click="increment">Increment</button>
    </div>
  `,

  data() {
    return {
      count: 0
    }
  },

  methods: {
    increment() {
      this.count++
    }
  }
}

#挂载组件
#2 导入类库
import { mount } from '@vue/test-utils'
#2 导入组件
import Counter from './counter'
#2 挂载组件
const wrapper = mount(Counter)
#2 访问实例
const vm = wrapper.vm
#2 查看更多
console.log(wrapper)
#2 其他操作：获取内容|用户交互...
eof

获取内容

::<<eof
expect(wrapper.html()).toContain('<span class="count">0</span>')
expect(wrapper.contains('button')).toBe(true)
eof

用户交互
此处用户交互主要讲述如何模拟用户交互

::<<eof
# 获取实例
  expect(wrapper.vm.count).toBe(0)
# 获取元素
  const button = wrapper.find('button')
# 触发点击
  button.trigger('click')
# 获取实例
  expect(wrapper.vm.count).toBe(1)
eof

异步操作
此处异步操作主要讲述如何模拟异步操作。

::<<eof
it('will catch the error using done', done => {
  Vue.config.errorHandler = done
  Vue.nextTick(() => {
    expect(true).toBe(false)
    done()
  })
})

it('will catch the error using a promise', () => {
  return Vue.nextTick().then(function() {
    expect(true).toBe(false)
  })
})
eof

一些技巧

01.Knowing What to Test
02.Shallow Rendering
03.Asserting Emitted Events
04.Emitting Event from Child Component
05.Manipulating Component State
06.Mocking Props
07.Applying Global Plugins and Mixins
08.Mocking Injections
09.Stubbing components
10.Dealing with Routing
11.Detecting styles

一些单元

用运行器
A test runner is a program that runs tests.

::<<eof
mocha-webpack
jest
eof

模拟浏端
running the tests in Node with a virtual browser environment using JSDOM

::<<eof
#安装
npm install --save-dev jsdom jsdom-global
#引入
require('jsdom-global')()

测试单组
一些测试单文件组件的示例
01.Testing Single-File Components with Jest
02.Testing Single-File Components with Mocha + webpack
03.Testing Single-File Components with Karma

一些示例

Testing Single-File Components with Jest

开始搭建

::<<eof
#安装软件
npm install --save-dev jest @vue/test-utils
#设置命令
// package.json
{
  "scripts": {
    "test": "jest"
  }
}
#处理单组
#2 安装
npm install --save-dev vue-jest
npm install --save-dev babel-jest
#2 设置
#3 01.tell Jest to handle `*.vue` files //{01}
#3 02.process `*.vue` files with `vue-jest` //{02}
#3 03.handling webpack Aliases //{03}
#3 04.configuring Babel for Jest  //{04}
#3 
// package.json
{
  // ...
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      // tell Jest to handle `*.vue` files  //{01}
      "vue"
    ],
    "transform": {
      // process `*.vue` files with `vue-jest` //{02}
      ".*\\.(vue)$": "vue-jest",
      // process js with `babel-jest` //{04}
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
    },
    // support the same @ -> src alias mapping in source code //{03}
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1"
    },

  }
}
eof

哪些文件
01.By default, Jest will recursively pick up all files that have a .spec.js or .test.js extension in the entire project.
02.If this does not fit your needs, it's possible to change the testRegex
in the config section in the package.json file.
测覆盖率

::<<eof
{
  "jest": {
    // ...
    "collectCoverage": true,
    // define the files for which coverage information should be collected
    "collectCoverageFrom": ["**/*.{js,vue}", "!**/node_modules/**"],
    "coverageReporters": ["html", "text-summary"]
  }
}
eof

单元示例

::<<eof
import { mount } from '@vue/test-utils'
import Component from './component'

describe('Component', () => {
  test('is a Vue instance', () => {
    const wrapper = mount(Component)
    expect(wrapper.isVueInstance()).toBeTruthy()
  })
})
eof

测试快照

::<<eof
# 安装
npm install --save-dev jest-serializer-vue
# 配置
{
  // ...
  "jest": {
    // ...
    // serializer for snapshots
    "snapshotSerializers": ["jest-serializer-vue"]
  }
}
# 测试
test('renders correctly', () => {
  const wrapper = mount(Component)
  expect(wrapper.element).toMatchSnapshot()
})
eof

Testing Single-File Components with Mocha + webpack

::<<eof
# 安装
npm install --save-dev @vue/test-utils mocha mocha-webpack
# 设置
#2 01.设置命令
#2 02.Externalizing NPM Dependencies
#2 02.Setting Up Browser Environment
#2 03.Picking an Assertion Library
#2 04.Optimizing Babel for Tests
// package.json
{
  "scripts": {
    "test": "mocha-webpack --webpack-config webpack.config.js --require test/setup.js test/**/*.spec.js"
  }
}

// webpack.config.js
const nodeExternals = require('webpack-node-externals')

module.exports = {
  // ...
  externals: [nodeExternals()]，
  devtool: 'inline-cheap-module-source-map'，
}
eof

Testing Single-File Components with Karma

testing-single-file-components-with-karma

参考文献

vue-test-utils.guides.vuejs[p].
eddyerburgh.vue-test-utils-karma-example[p].github
vuejs.vue-test-utils-mocha-webpack-example[p].github
vuejs.vue-test-utils-jest-example[p].github