黑马程序员技术交流社区
标题:
使用Jest对Vue组件进行单元测试
[打印本页]
作者:
绮罗
时间:
2020-4-10 10:25
标题:
使用Jest对Vue组件进行单元测试
安装yarn
全局安装@vue/cli。
用vue-cli创建个应用，选择手动模式，勾选Jest。
为这个应用添加@vue/test-utils包。
然后在components目录下创建Counter.vue，代码如下：
<template> <div> <div>{{ computedCount }}</div> <button @click="inc">加</button> <button @click="dec">减</button> <button @click="reset">重置</button> </div></template><script>export default { props: { factor: { type: Number, default: 1 } }, data() { return { count: 0 }; }, methods: { inc() { this.count++; }, dec() { this.count--; }, reset() { this.count = 0; } }, computed: { computedCount: function() { return this.count * this.factor; } }};</script>
在
unit
目录下创建
Counter.spec.js
，代码如下：
import
{ mount }
from
'@vue/test-utils'
import
Counter
from
'@/components/Counter.vue'
describe
(
"Counter.vue"
, ()
=>
{
it
(
"渲染Counter组件"
, ()
=>
{
const
wrapper
=
mount
(Counter)
expect
(wrapper.element).
toMatchSnapshot
() })
it
(
"初始化之为0"
, ()
=>
{
const
wrapper
=
mount
(Counter)
expect
(wrapper.vm.count).
toEqual
(
0
) })
it
(
"加1"
, ()
=>
{
const
wrapper
=
mount
(Counter) wrapper.vm.
inc
()
expect
(wrapper.vm.count).
toEqual
(
1
) })
it
(
"减1"
, ()
=>
{
const
wrapper
=
mount
(Counter) wrapper.vm.
dec
()
expect
(wrapper.vm.count).
toEqual
(
-
1
) })
it
(
"重置"
, ()
=>
{
const
wrapper
=
mount
(Counter) wrapper.vm.
reset
()
expect
(wrapper.vm.count).
toEqual
(
0
) })
it
(
"因数为10加1操作"
, ()
=>
{
const
wrapper
=
mount
(Counter, { propsData: { factor:
10
} }) wrapper.vm.
inc
()
expect
(wrapper.vm.computedCount).
toEqual
(
10
) })})
打开控制台，进入项目根目录，运行yarn test:unit，如图1所示：
https://upload-images.jianshu.io/upload_images/5402876-7ee2e8edb485c7dd.png?imageMogr2/auto-orient/strip|imageView2/2/format/webp
看代码很容易理解如何在unit test中初始化组件，初始化组件的属性，访问组件的数据，调用组件的方法等等。
作者:
放荡的人生
时间:
2020-4-16 16:43
很好
作者:
放荡的人生
时间:
2020-4-23 17:13
加油
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2