技术

从vue-test-utils入门前端单元测试

微信扫一扫,分享到朋友圈

从vue-test-utils入门前端单元测试
0 0

NNGX,又踩坑了。换个了环境,代码里面的api接口没还完,uat环境测试测着测到sit环境去了,记大过。抛开其他种种,发现自己不懂前端单元测试的东西,大过!今天翻出来vue官方自带vue-test-utils,虽然之前见到,但是没有重视,趁此机会赶紧补补.

快速尝鲜

按照官方教程,先安装官方案例跑起来一个简单的计数器测试案例。

git clone https://github.com/vuejs/vue-test-utils-getting-started
cd vue-test-utils-getting-started
npm install

安装完成之后打开里面我们要测试的单元代码,就是一个按钮,显示数字,点击按钮,数字+1,小小的案例。

export default {
  template: `
    <div>
      <span class="count">{{ count }}</span>
      <button @click="increment">Increment</button>
    </div>
  `,

  data () {
    return {
      count: 0
    }
  },

  methods: {
    increment () {
      this.count++
    }
  }
}

写一个单元测试的代码,代码如下,里面包含了一个单元测试的三条测试用例,每个it函数里面包含一个。 mount是可以将要进行测试的组件处理成可用的对象。官方翻译mount方法创建包裹器。(这里吐槽,能不能不要起各种奇奇怪怪的名字了。谷歌翻译的包装纸倒也挺贴切)

import { mount } from '@vue/test-utils'
import Counter from './counter'

describe('计数器', () => {
  // Now mount the component and you have the wrapper
  const wrapper = mount(Counter)

  it('渲染正确的标记', () => {
    expect(wrapper.html()).toContain('<span class="count">0</span>')
  })

  // it's also easy to check for the existence of elements
  it('是一个按钮', () => {
    expect(wrapper.contains('button')).toBe(true)
  })

  it('点击按钮应该使得计数递增', () => {
    expect(wrapper.vm.count).toBe(0)
    const button = wrapper.find('button')
    button.trigger('click')
    expect(wrapper.vm.count).toBe(1)
  })
})

然后我们运行一下

npm test

//下面是运行结果

  计数器
     渲染正确的标记 (14ms)
     是一个按钮 (26ms)
     点击按钮应该使得计数递增 (8ms)

Test Suites: 1 passed, 1 total   
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        5.191s
Ran all test suites.

总共总共1个测试套件,1个通过,总共3条测试,通过3个,快照没有,时间5.191s,运行完了所有的测试套件。

差不多意思就是最后会生成一个报告,不过只有大标题和小标题,还有结果。

describe it expect 相关

单元测试,目的最后呈现出来

describe是一个全局函数,声明一个测试套件(大标题)。两个参数,一个字符串(叫啥名),一个回调函数(干啥事)。

it 是一个全局函数,声明一条测试用例(小标题)。依然两个参数,一个字符串(叫啥名),一个回调函数(干啥事)。

expect 在编写测试时,通常需要检查值是否符合某些条件。api地址: https://jestjs.io/docs/zh-Hans/expect

  • toContain 看内容中是否包含 ‘0’ 这个html
  • toBe 等于
  • .toMatchSnapshot() 写入快照,例如 expect(wrapper.element).toMatchSnapshot()
  • .toBeTruthy() 断言

下面是还有四个其他全局函数,用于做些铺垫工作,准备测试数据,建立测试场景等等,测试完之后还要卸载。 beforeEach it测试用例执行前做的事儿 afterEach it测试用例执行后做的事儿 beforeAll describe测试套件执行前做的事儿 afterAll describe测试套件执行后做的事儿

可测试对象的创建(包裹器wrapper)

使用 mount 创建一个可测试对象,会把其中的内容进行组件及子组件全部渲染。默认传入组件,可选传入挂载内容。

使用 shallowMount 创建一个可测试对象,只挂载需要的组件,子组件不渲染。默认传入组件,可选传入挂载内容。

挂载内容包含插槽、模拟mock数据、prop对象、等等。另外本地我测试的没生效, TypeError: (0 , _testUtils.shallowMount) is not a function )

可测试对象Wrapper包裹器的属性与方法 https://vue-test-utils.vuejs.org/zh/api/wrapper/

常用

  • .element 跟目录DOM
  • contains() 判断 Wrapper 是否包含了一个匹配选择器的元素或组件。
  • emitted() 返回一个包含由 Wrapper vm 触发的自定义事件的对象。
  • exists() 断言 Wrapper 或 WrapperArray 是否存在。
  • find() 返回匹配选择器的第一个 DOM 节点或 Vue 组件的 Wrapper。
  • findAll() 返回一个 WrapperArray。可以使用任何有效的选择器。
  • html() 返回 Wrapper DOM 节点的 HTML 字符串。
  • is() 断言 Wrapper DOM 节点或 vm 匹配选择器。
  • isEmpty() 断言 Wrapper 并不包含子节点。
  • isVisible() 断言 Wrapper 是否可见。
  • isVueInstance() 断言 Wrapper 是 Vue 实例。
  • name() 如果 Wrapper 包含一个 Vue 实例则返回组件名,否则返回 Wrapper DOM 节点的标签名。
  • props() 返回 Wrapper vm 的 props 对象。如果提供了 key,则返回这个 key 对应的值。
  • setData() 设置 Wrapper vm 的属性。
  • setMethods() 设置 Wrapper vm 的方法并强制更新。
  • setProps() 设置 Wrapper vm 的 prop 并强制更新。
  • setValue() 设置一个文本控件或 select 元素的值并更新 v-model 绑定的数据。
  • trigger() 在该 Wrapper DOM 节点上触发一个事件。

呃,WrapperArray就是一组wrapper还有的方法和属性。呃,https://vue-test-utils.vuejs.org/zh/api/wrapper-array/

jest测试覆盖率

jest里面增加配置即可生成测试覆盖率的报告,控制台也会显示对应的结果。

=============================== Coverage summary ===============================
Statements   : 96.67% ( 29/30 )
Branches     : 61.11% ( 11/18 )
Functions    : 87.5% ( 7/8 )
Lines        : 95% ( 19/20 )
================================================================================

另外自己会新建一个coverage文件夹,里面有html版本的覆盖率报告。

留下疑问:

目前算是笔记学习吧,后面在项目中跑跑,才能有更深入的理解了。

  • 一个文件时候,控制台会打出所有的结果,逐条打勾的效果。2个测试文件的时候,居然只显示了结果,不明显,还没有详细的去了解具体配置。
半拉子前端的自留地,发际线逐渐后移的抠脚大叔!

前端身份证校验和个人信息数据模拟

上一篇

Windows下使用GIT管理推送FTP代码

下一篇

你也可能喜欢

发表评论

您的电子邮件地址不会被公开。 必填项已用 * 标注

提示:点击验证后方可评论!

插入图片

体验小程序

标签地图

分类

EA PLAYER &

历史记录 [ 注意:部分数据仅限于当前浏览器 ]清空

      00:00/00:00
      从vue-test-utils入门前端单元测试

      长按储存图像,分享给朋友

      微信扫一扫

      微信扫一扫