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>
- 在路由表中注册一下
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
}
]
})
- 准备开始测试改组件 找到在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是否为最后对应的值
})
})
-
运行测试命令 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
-
再次运行 npm run unit
image.png
