vue项目 单元测试

1 vue 项目搭建之后
看目录结构

image.png

2.搭建一个简单的测试demo
待测试文件 MyComponent.vue

image.png

<template>
  <div>
    {{ count }}
    <button @click="increment">自增</button>
  </div>
</template>
<script>
export default {
data () {
  return {
    count: 0
  }
},
methods: {
  increment () {
    this.count++
  }
}
}
</script>

3. 在路由表中注册一下

import Vue from 'vue'
import Router from 'vue-router'
import MyComponent from '@/components/MyComponent'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/my-component',
      name: 'MyComponent',
      component: MyComponent
    }
  ]
})

4. 准备开始测试改组件 找到在test/unit/specs目录下面创建一个MyComponent.spec.js文件

import Vue from 'vue'
import MyComponent from '@/components/MyComponent.vue'

describe('MyComponent.vue', () => {
  it('计数器在点击按钮时自增', () => {
    const vmComponent = new Vue(MyComponent).$mount(); // 获取mount中的组件实例
    console.log('计数器点击之前的值：' + vmComponent.count);   // 点击之前
    vmComponent.increment();     // 调用实例中的increment方法，点击计数器
    console.log('计数器点击之后的值：' + vmComponent.count);     // 点击之后
    expect(vmComponent.count).toBe(1);     // 判断最后的count是否为最后对应的值
  })
})

5. 运行测试命令 npm run unit
   一般 会报如下错误

   
   image.png
   

   问题一： Option "mapCoverage" has been removed, as it's no longer necessary.

解决：此属性已移除，详细可以见 https://jestjs.io/docs/en/configuration 官方公布的属性，在test/unit/jest.conf.js找到并删除该属性

image.png

问题2：localStorage is not available for opaque origins

解决：在jest.config.js里，增加这两个属性定义

image.png

参考：https://stackoverflow.com/questions/51554366/jest-securityerror-localstorage-is-not-available-for-opaque-origins#

6. 再次运行 npm run unit

   
   image.png