vue中的单元测试

单元测试 专栏收录该内容
4 篇文章 0 订阅

生成项目的时候一定要选择Jest选项,然后项目目录有tests文件夹
在这里插入图片描述

单元测试都写在unit这个文件夹里面,单元测试的具体内容

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

it ('测试HelloWorld', () => {
  let BaseVue = Vue.extend(HelloWorld) // 获取组件的构造函数
  let vm = new BaseVue({
    propsData: {
      msg: 'hello'
    }
  }).$mount()

  expect(vm.$el.innerHTML).toMatch('hello')
  vm.$destory()
})

vue 为了方法专门提供了测试的一些方法@vue/test-utils

import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message'
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg }
    })
    expect(wrapper.text()).toMatch(msg)
  })
})

这个测试的库里面有很多方法

TDD测试驱动开发,先写测试用例,再开发功能,测试覆盖率高
BDD行为驱动开发,先开发代码,在测试最后结果
集成测试,只测试大的组件,而不测试子组件,覆盖率低,功能能实现
https://cn.vuejs.org/v2/guide/unit-testing.html

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页

打赏

前端精髓

小礼物走一走,来CSDN关注我

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值