创建一个vue项目单元测试的demo
1、创建新项目vue webpack init unit-test
2、在src/components下创建组件 content.vue
<template>
<div class="content-wrap">
<h1 class="title">{
{
content }}</h1>
</div>
</template>
<script>
export default {
name: 'Content',
props: {
content: {
type: String,
default: 'Welcome to Your Vue.js App'
}
},
data () {
return {
}
}
}
</script>
<style scoped>
</style>
3、在test/unit/specs下创建content.spec.js
import {
shallowMount } from '@vue/test-utils'
import content from '@/components/content'
describe('Component.content', () => {
const wrapper = shallowMount(content, {
propsData: {
content: 'Hello'
}
})
it('传值正确', () => {
expect(wrapper.vm.content).toBe('Hello')
})
it('渲染正确', () => {
wrapper.setProps({
content: 'Hello World!'
})
expect(wrapper.find('.title').exists()).toBe(true)
})
})
4、yarn add @vue/test-utils 添加单元测试实用工具库
5、yarn test
报错的话这篇博客有解决方法: https://blog.csdn.net/qq_39367226/article/details/109247391