您现在的位置是:首页 >技术交流 >Vue Test Utils前端单元测试网站首页技术交流

Vue Test Utils前端单元测试

1佳佳佳佳 2024-06-16 00:01:02
简介Vue Test Utils前端单元测试

含义

单元测试(unit testing),是指对软件中的最小可测试单元进行检查和验证。在提供了经过测试的单元的情况下,系统集成过程将会大大地简化。

流行框架

Mocha (https://mochajs.cn/)、Jest (https://www.jestjs.cn/)在这里插入图片描述
Mocha + Chai 方式
Mocha 需要引入 chai 或则其他断言库去断言, 如果你需要查看覆盖率报告你还需要安装 nyc 或者其他覆盖率工具
./test/sum.test.js

const { expect, assert } = require('chai');
const sum = require('../sum');

describe('sum', function() {
  it('adds 1 + 2 to equal 3', () => {
    assert(sum(1, 2) === 3);
  });
});

Jest 方式
Jest 默认支持断言,同时默认支持覆盖率测试
./test/sum.test.js

const sum = require('./sum');

describe('sum function test', () => {
  it('sum(1, 2) === 3', () => {
    expect(sum(1, 2)).toBe(3);
  });
  
  // 这里 test 和 it 没有明显区别,it 是指: it should xxx, test 是指 test xxx
  test('sum(1, 2) === 3', () => {
    expect(sum(1, 2)).toBe(3);
  });
})

可见无论是受欢迎度和写法上,Jest 都有很大的优势,因此推荐使用开箱即用的 Jest

Vue Test Utils

Vue.js 官方的单元测试实用工具库。
提供特定的方法,在隔离的环境下,进行组件的挂载,以及一系列的测试。被挂载的组件会返回到一个包裹器内,而包裹器会暴露很多封装、遍历和查询其内部的 Vue 组件实例的便捷的方法。

Vue Test Utils 使用

方式一:使用 Vue CLI 创建项目的时候。
方式二:在一个已有的 Vue CLI 创建的项目中配置 Jest:vue add unit-jest

以方式一为例:
在这里插入图片描述在这里插入图片描述
在这里插入图片描述

语法:

关键字:

mount()与shallowMount():

mount()会将整个组件及其所有子组件都挂载到DOM中,包括所有子组件的模板和逻辑。这意味着,如果您的组件有许多嵌套的子组件,使用mount()可能会导致渲染时间变慢,测试速度变慢。同时,如果您的组件有一些依赖于其他组件的逻辑,使用mount()可能会导致这些依赖组件的逻辑也被执行,从而增加测试复杂度和维护成本。

相比之下,shallowMount()仅将当前组件挂载到DOM中,而不会挂载其子组件。这意味着,如果您只需要测试当前组件的逻辑,或者您的组件有许多嵌套的子组件,使用shallowMount()可能更加高效。

在这里插入图片描述
在这里插入图片描述

Wrapper包裹器

Wrapper:Wrapper 是一个包括了一个挂载组件或 vnode,以及测试该组件或 vnode 的方法。
Wrapper.vm:这是该 Vue 实例。你可以通过 wrapper.vm 访问一个实例所有的方法和属性。
Wrapper.classes:返回是否拥有该class的dom或者类名数组。
Wrapper.find:返回第一个满足条件的dom。
Wrapper.findAll:返回所有满足条件的dom。===>可以搭配at()使用
Wrapper.html:返回html字符串。
Wrapper.text:返回内容字符串。
Wrapper.setData:设置该组件的初始data数据。
Wrapper.setProps:设置该组件的初始props数据。
Wrapper.trigger:用来触发事件。

describe()

创建一个分组,可以在这里面编写相应的测试计划。

It()

It 断言 他有两个参数 第一个是字符串 一般用于说明测试组件的那个内容 ,
第二个参数为一个函数 里面用于编写判断,当判断错误时可以精准的查找到错误位置

expect()

Jest为我们提供了expect函数用来包装被测试的方法并返回一个对象,
该对象中包含一系列的匹配器来让我们更方便的进行断言,上面的toBe函数即为一个匹配器

匹配器

toBe() 精准匹配toBe和toEqual同样适用于数字。
toBeNull只匹配null
toBeUndefined只匹配undefined
toBeDefine与toBeUndefined相反
toBeTruthy匹配任何if语句为真====>存在类型转换
toBeFalsy匹配任何if语句为假====>存在类型转换
expect(fn).toHaveBeenCalled() // 判断函数是否被调用
expect(fn).toHaveBeenCalledTimes(number) // 判断函数被调用次数
expect(['one','two']).toContain('one'); // 含有某个元素

toBeGreaterThan()大于
toBeGreaterThanOrEqual()大于等于
toBeLessThan()小于
toBeLessThanOrEqual()小于等于

toMatch()测试字符串,传递的参数是正则表达式

快照功能toMatchSnapshot()

it('test toMatchSnapshot ', async () => {
    await wrapper.vm.$nextTick(); // 同步获取dom元素渲染
    expect(wrapper.element).toMatchSnapshot();
})
首先在快照之前 使用nextTick是为了防有些dom元素没有渲染完成,就生成快照,会导致样式有问题
使用快照功能 可以在tests文件下生成__snapshots__文件夹,
在__snapshots__目录中产生一个xxx.test.js.snap文件 会将所测试的组件生成html结构,
方便观察元素是否成功渲染

快照过时:
在这里插入图片描述

事件测试

Trigger()

it('button click should increment the count', () => {
    wrapper.setData({
      count: 1
    })
    const button = wrapper.find('button')
    button.trigger('click')
    expect(wrapper.vm.count).toBe(2)
})

emitted()

test('msg should be changed by Emit', () => {
    const button = wrapper.findAll('button').at(1)
    button.trigger('click')
    expect(wrapper.emitted()).toHaveProperty('reset')
})

方法测试

import  { addNum, getUuid }   from '@/utils/uuid.js';
describe('测试 uuid', () => {
  it("test uuid 方法addNum", async()=>{
      const result = addNum(1,2);
      console.log(result);
      expect(result).toBe(3);
  });

  it("test uuid 方法getUuid", async()=>{
    const testContent = getUuid();
    expect(testContent).toMatch(/^[0-9a-zA-Z]{8}-[0-9a-zA-Z]{4}-[0-9a-zA-Z]{4}-[0-9a-zA-Z]{4}-[0-9a-zA-Z]{12}$/i);
 });
});
只执行某一文件:npm run test:unit --grep example.spec.js
只执行某一目录下的所有文件:npm run test:unit --grep unit
输出完整的测试报告:npm run test:unit -- --coverage

在这里插入图片描述
在这里插入图片描述

  1. Statements: 代码中被测试覆盖的语句比例为90.47%,共有2187个语句中的19个未被覆盖。
  2. Branches: 代码中被测试覆盖的分支比例为5.5%,共有81个分支中的7个未被覆盖。
  3. Functions: 代码中被测试覆盖的函数比例为100%,共有5个函数中的0个未被覆盖。
  4. Lines: 代码中被测试覆盖的行数比例为95%,共有20行中的1行未被覆盖。

接口测试(Axios Mock Adapter)

Vue Test Utils 是一个用于测试 Vue 组件的 JavaScript 库,主要用于测试组件的行为和状态。Vue Test Utils 并不是一个用于测试接口的库,但是我们可以使用其他的 JavaScript 测试库来测试接口,例如 Jest、Mocha 等。

在使用 Jest 或 Mocha 进行接口测试时,我们可以使用一些工具来模拟 HTTP 请求和响应,例如 Axios Mock Adapter、Fetch Mock 等。这些工具可以帮助我们模拟接口请求和响应,并验证我们的代码是否正确处理了它们。

下面是一个使用 Jest 和 Axios Mock Adapter 进行接口测试的示例:

javascript
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';

describe('example API test suite', () => {
  let mockAxios;

  beforeEach(() => {
    mockAxios = new MockAdapter(axios);
  });

  afterEach(() => {
    mockAxios.reset();
  });

  it('should handle a successful request', async () => {
    const responseData = { data: 'example data' };
    mockAxios.onGet('/example').reply(200, responseData);

    const response = await axios.get('/example');

    expect(response.status).toEqual(200);
    expect(response.data).toEqual(responseData);
  });

  it('should handle a failed request', async () => {
    mockAxios.onGet('/example').reply(500);

    await expect(axios.get('/example')).rejects.toThrow();
  });
});
在这个示例中,我们使用 Axios Mock Adapter 模拟了一个 GET 请求,并分别测试了请求成功和请求失败的情况。我们使用 Jest 的 expect 函数来验证请求的结果是否符合预期。
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。