vue jest单元测试

这篇具有很好参考价值的文章主要介绍了vue jest单元测试。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、渲染: mount 和 shallowMount

1.1 mount 和 shallowMount

vue-test-utils 提供了两种方式用于渲染,或者说 加载(mount) 一个组件 — mountshallowMount。一个组件无论使用这两种方法的哪个都会返回一个 wrapper,也就是一个包含了 Vue 组件的对象,辅以一些对测试有用的方法。

1.2 mount 和 shallowMount的区别

  • mount: 会渲染子组件
  • shallowMount:会加载子组件,不会被子组件的行为属性影响该组件

二、 beforeEach 和beforeAll

2.1 为多次测试重复设置

如果你有一些要为多次测试重复设置的工作,可以使用beforeEach和afterEach。
有这样一个需求,需要我们在每个测试之前调用方法initializeCityDatabase(),在每个测试后,调用方法clearCityDatabase()

beforeEach(() => {
  initializeCityDatabase();
});

afterEach(() => {
  clearCityDatabase();
});

test('city database has Vienna', () => {
  expect(isCity('Vienna')).toBeTruthy();
});

test('city database has San Juan', () => {
  expect(isCity('San Juan')).toBeTruthy();
});

2.2 一次性设置

在某些情况下,你只需要在文件的开头做一次设置。这种设置是异步行为的时候,你不太可能一行处理它。Jest提供了beforeAll和afterAll处理这种情况。

beforeAll(() => {
  return initializeCityDatabase();
});

afterAll(() => {
  return clearCityDatabase();
});

test('city database has Vienna', () => {
  expect(isCity('Vienna')).toBeTruthy();
});

test('city database has San Juan', () => {
  expect(isCity('San Juan')).toBeTruthy();
});

2.3 作用域

默认情况下,before和after的块可以应用到文件中的每一个测试。此外可以通过describe块来将将测试中的某一块进行分组。当before和after的块在describe块内部的时候,则只适用于该describe块内的测试。

三、匹配器

3.1 匹配器基础

  • toBe:判断是否相等
  • toBeNull:判断是否为null
  • toBeUndefined:判断是否为undefined
  • toBeDefined:与上相反
  • toBeNaN:判断是否为NaN
  • toBeTruthy:判断是否为true
  • toBeFalsy:判断是否为false
  • toContain:数组用,检测是否包含
  • toHaveLength:数组用,检测数组长度
  • toEqual:对象用,检测是否相等
  • toStrictEqual:功能与 toEqual 相似,但是更加严格
  • toThrow:异常匹配
  • toBeCalled: 函数是否被调用
  • toHaveBeenCalledTimes: 函数被调用几次
  • expect.assertions(n): 表示必须执行n次expect 代码才算执行完

3.2 匹配器使用

describe('Test', () => {
  // 判断是否相等
  expect(2 + 2).toBe(4);
  // 判断是否为null
  expect(null).toBeNull();
  // 判断是否为undefined
  expect(undefined).toBeUndefined();
  let a = 1;
  // 判断是否不为undefined
  expect(a).toBeDefined();
  a = 'ada';
  // 判断是否为NaN
  expect(a).toBeNaN();
  a = true;
  // 判断是否为true
  expect(a).toBeTruthy();
  a = false;
  // 判断是否为false
  expect(a).toBeFalsy();
  a = [1, 2, 3];
  // 数组用,检测是否包含
  expect(a).toContain(2);
  // 数组用,检测数组长度
  expect(a).toHaveLength(3);
  a = { a: 1 };
  // 对象用,检测是否相等
  expect(a).toEqual({ a: 1 });
  // 功能与 toEqual 相似,但是更加严格
  expect(a).toStrictEqual({ a: 1 });
  a = () => 1;
  // 函数是否被调用
  expect(a).toBeCalled();
  // 函数被调用几次
  expect(a).toHaveBeenCalledTimes(1);
});

3.3 toStrictEqual 与 toEqual 的区别

toStrictEqual 的功能与 toEqual 相似,但是更加严格。主要体现在:

  • 即使两个对象的成员相同,但原型链不同则不同。
  • undefined 和未定义不兼容。

3.4 expect.assertions(number)

验证在测试期间调用了一定数量的断言,在测试异步代码时这通常很有用,以便确保回调中的断言确实被调用。
假设我们有一个函数doAsync,它接收两个回调callback1和callback2,它将异步地以一个未知的顺序调用它们。

test('doAsync calls both callbacks', () => {
  expect.assertions(2);
  function callback1(data) {
    expect(data).toBeTruthy();
  }
  function callback2(data) {
    expect(data).toBeTruthy();
  }
 
  doAsync(callback1, callback2);
});

四、Wrapper

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

五、模拟函数

5.1 模拟函数

  • jest.fn():生成一个模拟函数,这个函数可以用来代替源代码中被使用的第三方函数
  • mockFn.mockImplementation(fn):接受一个函数,该函数应用作模拟的实现
  • mockFn.mockImplementationOnce(fn):接受一个函数,该函数将用作对被模拟函数的一次调用的模拟实现
  • mockFn.mockReturnValue(value):用于定义在指定函数的每一次调用时返回预设值
  • mockFn.mockReturnValueOnce(value)
  • mockFn.mockResolvedValue(value):用于定义在指定异步函数的每一次调用时返回预设值
  • mockFn.mockResolvedValueOnce(value)

5.2 mockImplementationOnce()

const myMockFn = jest.fn(() => 'default')
  .mockImplementationOnce(() => 'first call')
  .mockImplementationOnce(() => 'second call');

console.log(myMockFn(), myMockFn(), myMockFn(), myMockFn());
// 'first call', 'second call', 'default', 'default'

六、mock系统

6.1 常用的mock方法

在单元测试中,很多时候不想因为通过测试而改变原来的代码逻辑或者只是想简单地获取一个数据来顺利进行测试,这个时候就需要手动mock数据,Jest提供了一个强大的mock系统。在全局的Jest对象里,有三个常用的mock方法:

  • jest.fn(implementation):返回一个mock函数,其中implementation 为可选,代表mock函数的模拟实现。
  • jest.mock(moduleName, factory, options):用来mock一些模块或者文件。
  • jest.spyOn(object, methodName):返回一个mock函数,和jest.fn相似,但是能够追踪object[methodName]的调用信息,如果object[methodName]不是一个函数,则会报错。

6.2 jest.fn()

Jest.fn()是创建Mock函数最简单的方式,如果没有定义函数内部的实现,jest.fn()会返回undefined作为返回值。
Jest.fn()所创建的Mock函数还可以设置返回值,定义内部实现或返回Promise对象。

6.3 jest.mock()

6.3.1 使用 jest.mock 自动 mock

jest.mock('./utils.ts') 自动返回一个 mock ,可以使用它来监视对类构造函数及其所有方法的调用。

6.3.2 jest.mock()直接在单元测试里面mock 模块

jest.mock(path, moduleFactory) 接受模块工厂参数。模块工厂是一个返回模拟的函数。为了模拟构造函数,模块工厂必须返回构造函数。换句话说,模块工厂必须是返回函数的函数-高阶函数(HOF)。

jest.mock('fs', () => ({
    readFileSync: jest.fn()
}))

6.3.3 在需要mock的模块目录临近建立目录__mocks__

6.3.4 样例

// utils.js
export default {
  add(a, b) {
    console.log('---------------util.js add----------');
    return a + b;
  }
};
// mock.js
import utils from './utils';
export default {
  test() {
    console.log('---------------mock.js test----------');
    return utils.add(1, 2);
  }
};
// mock.test.js
import m from './mock';
import utils from './utils';
jest.mock('./utils.js');
it('mock 整个 fetch.js模块', () => {
  m.test();
  expect(utils.add).toBeCalledTimes(1);
});

6.4 jest.spyOn()

jest.spyOn()方法同样创建一个mock函数,但是该mock函数不仅能够捕获函数的调用情况,还可以正常的执行被spy的函数。实际上,jest.spyOn()是jest.fn()的语法糖,它创建了一个和被spy的函数具有相同内部代码的mock函数。

import m from './mock';
import utils from './utils';
it('mock 整个 fetch.js模块', () => {
  const y = jest.spyOn(utils, 'add');
  m.test();
  expect(y).toBeCalledTimes(1);
});
  • 使用jest.mock() 时add方法实际没有执行,使用jest.spyOn()时add会被执行

七、wrapper.emitted()

每个挂载的包裹器都会通过其背后的 Vue 实例自动记录所有被触发的事件。你可以用 wrapper.emitted() 方法取回这些事件记录。

wrapper.vm.$emit('foo')
wrapper.vm.$emit('foo', 123)
/*
`wrapper.emitted()` 返回以下对象:
{
  foo: [[], [123]]
}
*/

// 断言事件已经被触发
expect(wrapper.emitted().foo).toBeTruthy()

// 断言事件的数量
expect(wrapper.emitted().foo.length).toBe(2)

// 断言事件的有效数据
expect(wrapper.emitted().foo[1]).toEqual([123])

你也可以调用 wrapper.emittedByOrder() 获取一个按触发先后排序的事件数组。文章来源地址https://www.toymoban.com/news/detail-450674.html

参考

  • Vue测试指南(vue.js 2)
  • vue中如何使用jest单元测试
  • jest beforeEach 和beforeAll区别
  • Jest 配置与 React Hook 单元测试教程
  • jest手册
  • Jest 使用指南 - - Mock 篇
  • 【测试学习】UI测试工具vue-test-utils入门教程
  • Vue 应用测试

到了这里,关于vue jest单元测试的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue+jest 单元测试配置+用例

    目录 目录 1 Jest 说明文档 2 1、 搭建node环境包 2 这里安装环境是node 18,npm 9.5.0。 2 Test Runner 2 2、 安装jest 3 Jest安装步骤 4 项目的根目录下创建一个.babelrc 配置文件: 4 在项目的根目录下创建 jest.config.js 4 3、 全局设定 5 预处理和后处理 5 方法 6 4、 断言 6 真假断言 6 数字断言

    2024年02月07日
    浏览(40)
  • vue-cli 项目集成 Jest 单元测试

    前端单元测试对于保证代码质量和稳定性是非常重要的。 为什么需要单元测试: 检测bug; 提升回归效率; 保证代码质量。  ①、Mocha 比较灵活成熟,但没有内部集成,需要自主选择断言库和监听库。。 ②、Jasmine 是 Jest 的底层库,助攻 BDD(即行为驱动开发)断言库与异步测

    2024年01月17日
    浏览(75)
  • Jest单元测试(一)

    Jest是Facebook一套开源的 JavaScript 测试框架,它自动集成了断言、JSDom、覆盖率报告等测试工具。 他适用但不局限于使用以下技术的项目:Babel, TypeScript, Node, React, Angular, Vue 官网地址:https://jestjs.io/en/ 使用 yarn 安装 Jest︰ 或 npm: 注:Jest的文档统一使用yarn命令,不过使用npm也

    2024年02月16日
    浏览(44)
  • 如何使用Jest进行单元测试

    Jest 是一种流行的 JavaScript 测试框架,它具有易用性和高效性。Jest 支持测试各种 JavaScript 应用程序,包括 React、Vue、Node.js 等。在本文中,我们将介绍如何使用 Jest 进行单元测试。 ## 1. 安装 Jest 首先,我们需要在项目中安装 Jest。可以使用 npm 或 yarn 安装 Jest: ``` npm install

    2024年02月10日
    浏览(40)
  • 单元测试(jest):理解、安装、使用

    一、理解单元测试的重要性 bug发现在开发阶段,成本很低, 如果发现在生产环境,成本很高, 如果是关键时刻,决定人生命运,决定企业发展。 从技术的角度讲,有效的提高代码的健壮性,有效的增加代码的可维护性,对于后期的代码重构是必要条件。 从团队的角度讲,

    2024年02月03日
    浏览(43)
  • jest单元测试支持ts文件方案

    jest配置 jest配置如下: 额外配置说明: 其中transform增加了jest的es6处理能力。默认情况下jest只能处理require文件,当配置tranform后可以对impoet文件进行处理 prese和testEnvironment为jest增加ts处理能力 注意jest文件应当放在需要进行单元测试的目录,jest将按照其配置文件所子目录按照

    2024年02月14日
    浏览(36)
  • Jest:给你的 React 项目加上单元测试

    大家好,我是前端西瓜哥。 Jest 是一款轻量的 JavaScript 测试框架,它的卖点是简单好用,由 facebook 出品。本文就简单讲讲如何使用 Jest 对 React 组件进行测试。 单元测试 (Unit Testing),指的是对程序中的模块(最小单位)进行检查和验证。比如一个函数、一个类、一个组件,

    2024年02月09日
    浏览(42)
  • 快速上手 Jest 单元测试框架:使用 Jest Preset 加速配置,灵活应对项目需求

    Jest preset 参数的作用是提供一个预先定义好的配置集合,以便于快速开始使用 Jest 单元测试框架。你可以选择现有的 preset,如 jest-preset-angular 、 create-react-app 或自定义 preset,以根据你的项目需求自动应用一系列配置。 使用示例: 先安装一个现有的 preset,例如 jest-preset-angul

    2024年02月06日
    浏览(36)
  • Jest单元测试:玩转代码的小捉迷藏!

    Jest Jest 是什么? Jest 是一个流行的 JavaScript 测试框架,专注于简化和改进代码的测试流程。它由 Facebook 开发并维护,具有以下特点: 1、易用性:Jest 提供了一个简单而强大的测试框架,使得编写和运行测试变得非常容易。 2、自动化:它自动发现和运行测试,无需复杂的配

    2024年01月23日
    浏览(43)
  • (2.2w字)前端单元测试之Jest详解篇

    Jest是一个领先的JavaScript测试框架,特别适用于React和Node.js环境。由Facebook开发,它以简单的配置、高效的性能和易用性而闻名。Jest支持多种类型的测试,包括单元测试、集成测试和快照测试,后者用于捕获组件或数据结构的状态,以便于后续的比较和验证。Jest自动化模拟依

    2024年02月20日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包