Jest单元测试(二)

最新推荐文章于 2024-04-07 16:34:40 发布
最新推荐文章于 2024-04-07 16:34:40 发布
阅读量1.5k 收藏
点赞数
分类专栏： 单元测试 文章标签： 单元测试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012987546/article/details/109565652
版权

Jest 使用匹配器

新建 using-matchers.test.js 测试文件

  1. 普通匹配 - toEqual
// using-matchers.test.js

// toBe 使用 Object.is 来测试精确相等
test('two plus two is four', () => {
    expect(2 + 2).toBe(4);
});

// 如果您想要检查对象的值，请使用 toEqual, toEqual 递归检查对象或数组的每个字段。
test('object assignment', () => {
    const data = {one: 1};
    data['two'] = 2;
    expect(data).toEqual({one: 1, two: 2});
});

// not 可以测试相反的匹配︰
test('adding positive numbers is not zero', () => {
    for (let a = 1; a < 10; a++) {
      for (let b = 1; b < 10; b++) {
        expect(a + b).not.toBe(0);
      }
    }
});
  1. Truthiness 匹配

toBeNull 只匹配 null
toBeUndefined 只匹配 undefined
toBeDefined 与 toBeUndefined 相反
toBeTruthy 匹配任何 if 语句为真
toBeFalsy 匹配任何 if 语句为假

例如：

test('null', () => {
    const n = null;
    expect(n).toBeNull();
    expect(n).toBeDefined();
    expect(n).not.toBeUndefined();
    expect(n).not.toBeTruthy();
    expect(n).toBeFalsy();
});
  
test('zero', () => {
    const z = 0;
    expect(z).not.toBeNull();
    expect(z).toBeDefined();
    expect(z).not.toBeUndefined();
    expect(z).not.toBeTruthy();
    expect(z).toBeFalsy();
  });
  1. 数字匹配 - toBe
// 大多数的比较数字有等价的匹配器。
test('two plus two', () => {
  const value = 2 + 2;
  expect(value).toBeGreaterThan(3);
  expect(value).toBeGreaterThanOrEqual(3.5);
  expect(value).toBeLessThan(5);
  expect(value).toBeLessThanOrEqual(4.5);

  // toBe and toEqual are equivalent for numbers
  expect(value).toBe(4);
  expect(value).toEqual(4);
});

// 对于比较浮点数相等，使用 toBeCloseTo 而不是 toEqual，因为你不希望测试取决于一个小小的舍入误差。
test('两个浮点数字相加', () => {
  const value = 0.1 + 0.2;
  //expect(value).toBe(0.3);           这句会报错，因为浮点数有舍入误差
  expect(value).toBeCloseTo(0.3); // 这句可以运行
});
  1. 字符串匹配 - toMatch

您可以检查对具有 toMatch 正则表达式的字符串

test('there is no I in team', () => {
  expect('team').not.toMatch(/I/);
});

test('but there is a "stop" in Christoph', () => {
  expect('Christoph').toMatch(/stop/);
});
  1. 数组匹配 - toContain
    可以通过 toContain 来检查一个数组或可迭代对象是否包含某个特定项
const shoppingList = [
  'diapers',
  'kleenex',
  'trash bags',
  'paper towels',
  'beer',
];

test('the shopping list has beer on it', () => {
  expect(shoppingList).toContain('beer');
  expect(new Set(shoppingList)).toContain('beer');
});

Jest 挂载与卸载函数


// 在所有测试开始之前调用（调用一次）
beforeAll(() => {
  console.log('beforeAll init data ')
});
  
// 在所有测试用例执行完之后调用（一次）
afterAll(() => {
  console.log('afterAll init data ')
});

// 在每个测试用例执行之前调用
beforeEach(() => {
  console.log('beforeEach init data ')
});
// 在每个测试用来执行完之后调用  
afterEach(() => {
  console.log('afterEach clear data ')
});

test('test 1', () => {

});
test('test 2', () => {

});

Jest 测试分组

使用 describe 函数 给测试用例进行分组

describe('普通配置器的案例组', () => {
    // toBe 使用 Object.is 来测试精确相等
    test('two plus two is four', () => {
        expect(2 + 2).toBe(4);
    });
    // 如果您想要检查对象的值，请使用 toEqual, toEqual 递归检查对象或数组的每个字段。
    test('object assignment', () => {
        const data = {one: 1};
        data['two'] = 2;
        expect(data).toEqual({one: 1, two: 2});
    });
    // ....
});

describe('Truthiness匹配器的案例组', () => {
    test('null', () => {
        const n = null;
        expect(n).toBeNull();
        expect(n).toBeDefined();
        expect(n).not.toBeUndefined();
        expect(n).not.toBeTruthy();
        expect(n).toBeFalsy();
    });
    // ...
});

Jest 作用域

// Applies to all tests in this file
beforeEach(() => {
  console.log('在 下面所有的测试用例之前 执行')
});

// toBe 使用 Object.is 来测试精确相等
test('1.two plus two is four', () => {
    expect(2 + 2).toBe(4);
});

// 如果您想要检查对象的值，请使用 toEqual, toEqual 递归检查对象或数组的每个字段。
test('2.object assignment', () => {
    const data = {one: 1};
    data['two'] = 2;
    expect(data).toEqual({one: 1, two: 2});
});
  
describe('Truthiness匹配器的案例组', () => {
  // Applies only to tests in this describe block
  beforeEach(() => {
    console.log('仅仅在 下面这一个测试用例之前 会执行')
  });
  test('3.null', () => {
      const n = null;
      expect(n).toBeNull();
      expect(n).toBeDefined();
  });
});

Jest 模拟函数

编写utils.js

const checkedLogin = (name, password) => {
    if(name === 'admin' && password === '123456'){
      return true
    } else {
      return false
    }
} 
// export default { checkedLogin } // es6 ok
module.exports= {
  checkedLogin
}

编写mock-func.js

import utils from './utils.js'


export const login =(name, password, callback) => {
    if(utils.checkedLogin(name, password)){
      callback('登录成功'); // 编写测试模拟该函数被调用
    } else {
      callback('登录失败'); // 编写测试模拟该函数被调用
    }
}

在 mock-func.test.js 编写单元测试（模拟回调函数如何被调用、调用时的参数和返回值的信息等）


import { login } from './mock-func.js'

describe('login 测试组', () => {

    test('test login1 函数有返回结果', ()=> {
      // 1.模拟登录的回掉函数
      // const mockCallback = jest.fn(res => { // callback 函数接收到的参数
      //     return '登录返回的结果：' + res // callback 函数返回的结果
      // });
      const mockCallback = jest.fn()
        .mockImplementation(res => { // callback 函数接收到的参数
            return '登录返回的结果：' + res // callback 函数返回的结果
        });

      // 2.调用登录函数 
      login('admin', 1234, mockCallback)

      // 3.判断 callback 函数被调用的次数
      expect(mockCallback.mock.calls.length).toBe(1);
      // 4.判断 callback 函数接收到的参数
      expect(mockCallback.mock.calls[0]).toContain('登录失败'); //  ["登录失败"]
      // 5.判断 callback 函数返回的结果
      expect(mockCallback.mock.results[0].value).toBe('登录返回的结果：登录失败');
      // 6.判断 callback 是否被调用
      expect(mockCallback).toHaveBeenCalled();
      // 7.判断 callback 调用时传入的参数是：登录失败
      expect(mockCallback).toHaveBeenCalledWith('登录失败');
    })

    // mock 没有返回值    
    test('test login2 函数没有返回结果', ()=> {
      // 1.模拟登录的回掉函数
      const mockCallback = jest.fn(); // 函数没有返回直接

      // 2.调用登录函数 
      login('admin', 1234, mockCallback)

      // 3.判断 callback 函数被调用的次数
      expect(mockCallback.mock.calls.length).toBe(1);
      // 4.判断 callback 函数接收到的参数
      expect(mockCallback.mock.calls[0]).toContain('登录失败'); //  ["登录失败"]
      // 5.判断 callback 函数没有返回结果
      expect(mockCallback.mock.results[0].value).toBeUndefined()
    })

    // mock 返回值
    test('test login3 自定义函数的返回结果', ()=> {
        // 1.模拟登录的回掉函数
        const mockCallback = jest.fn()
        mockCallback.mockReturnValueOnce('自定义函数的返回结果') // 函数只返回一次
        // mockCallback.mockReturnValue('自定义函数的返回结果') // 函数可被调用多次，返回多次
        
        // 2.调用登录函数 
        login('admin', 1234, mockCallback)
  
        // 3.判断 callback 函数被调用的次数
        expect(mockCallback.mock.calls.length).toBe(1);
        // 4.判断 callback 函数接收到的参数
        expect(mockCallback.mock.calls[0]).toContain('登录失败'); //  ["登录失败"]
        // 5.判断 callback 函数返回的结果
        expect(mockCallback.mock.results[0].value).toBe('自定义函数的返回结果');
    })

})

所有的 mock 函数都有这个特殊的 .mock属性，它保存了关于此函数如何被调用、调用时的返回值的信息。 .mock 属性还追踪每次调用时 this的值，

执行单元测试：yarn test

LiuJun-MacBook-Pro:jest liujun$ yarn test mock-func.js
yarn run v1.13.0
$ jest mock-fu
 PASS  ./mock-func.test.js
  login 测试组
    ✓ test login1 函数有返回结果 (4 ms)
    ✓ test login2 函数没有返回结果
    ✓ test login3 自定义函数的返回结果

Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        1.832 s, estimated 2 s
Ran all test suites matching /mock-fu/i.
✨  Done in 3.59s.
LiuJun-MacBook-Pro:jest liujun$

在 mock-func.test.js 编写单元测试（模拟 utils 模块，模拟 utils.checkedLogin 函数的实现 ）



import { login } from './mock-func.js'

// 1.jest.mock('./utils.js')
let utils = require('./utils.js') // import utils from './utils.js' // ok
// 2.mock 掉 ./utils.js 所有的函数
jest.mock('./utils.js') // 这两个导入顺序没有要求，但是不用再组里面导入

describe('login 测试组', () => {
    // mock 模拟utils模块
    test('test login4 模拟内部的函数（模块）', ()=> {
        // 3.重新实现utils模块对应的函数
        // utils.checkedLogin.mockResolvedValue(true) // ok
        utils.checkedLogin.mockImplementation((name, passwrod )=> {
            if(name === 'admin' && passwrod === '1234'){
                return true
            } else {
                return false
            }
        })

        // 4.模拟登录的回掉函数
        const mockCallback = jest.fn()
        mockCallback.mockReturnValueOnce('自定义函数的返回结果') // 函数只返回一次
        
        // 5.调用登录函数 
        login('admin', '1234', mockCallback)
  
        // 6.判断 callback 函数被调用的次数
        expect(mockCallback.mock.calls.length).toBe(1);
        // 7.判断 callback 函数接收到的参数
        expect(mockCallback.mock.calls[0]).toContain('登录成功'); //  ["登录失败"]
        // 5.判断 callback 函数返回的结果
        expect(mockCallback.mock.results[0].value).toBe('自定义函数的返回结果');
    })

})

执行单元测试：yarn test

LiuJun-MacBook-Pro:jest liujun$ yarn test mock-func.js
yarn run v1.13.0
$ jest mock-fu
 PASS  ./mock-func.test.js
  login 测试组
    ✓ test login1 函数有返回结果 (4 ms)
    ✓ test login2 函数没有返回结果
    ✓ test login3 自定义函数的返回结果
    ✓ test login4 模拟内部的函数（模块） (1 ms)

Test Suites: 1 passed, 1 total
Tests:       4 passed, 4 total
Snapshots:   0 total
Time:        1.832 s, estimated 2 s
Ran all test suites matching /mock-fu/i.
✨  Done in 3.59s.
LiuJun-MacBook-Pro:jest liujun$
LiuJun2Son
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue+Jest 单元测试
arron4210的博客
06-10 2134
新到一个公司，要求单元测试覆盖率达50%以上，我们都是后补的单测，其实单测的意义是根据需求提前写好，驱动开发，代替手动测试。然鹅这只是理想。。。 这里总结一下各种遇到的单测场景 挂载组件，调用elementui, mock函数 ```javascript describe('页面验证', () => { const wrapper = getVue({ component: onlineFixedPrice, callback(Vue) { Vue.use(
jest单元测试教程
08-10
【 Jest 单元测试教程详解】 在现代 JavaScript 开发中，单元测试是保障代码质量、稳定性和可维护性的重要手段。Jest 是 Facebook 推出的一款功能强大的 JavaScript 测试框架，它以其易用性、全面的功能和良好的...
Jest (三)
Luckyzhoufangbing的博客
05-27 481
Jest 中的匹配器 1. toBe toBe ：js 中的绝对相同=== 三个等号 2. toEqual toEqual ：是"相等"，不是"相同" test('toBe', () => { const a = {name: 'li'} expect(a).toBe({name: 'li'}) }) test('toEqual', () => { const a = {name: 'li'} expect(a).toEqual({name: 'li'}) })..
前端实现Jest单元测试
m0_56344602的博客
07-27 731
首先简单理解一下什么是单元测试，举个例子： 小明同学偶然发现海海同学做的组件库不错，想学习一下，于是就拉了代码，不过在看代码的过程中发现有的代码有更优性能的方法，但是呢他自己也不确定性能是否更好，那这种情况怎么办呢，这时候就可以用到我们的单元测试了。...
Jest 进行前端单元测试
WdbM_的博客
09-28 1652
Jest 是用来创建、执行和构建测试用例的 JavaScript 测试库，配置使用相当简单，十分推荐，文章对 Jest 进行了初步的使用
初使jest 单元测试
小菜张的博客
08-09 494
jest测试
vue 引入jest 单元测试
wanglun_的博客
06-01 1215
为什么要搞单元测试，好处有什么。
jest单元测试入门到进阶
qq_39406460的博客
10-09 875
使用faceBook公司开发的jest库写点自己ui库的测试用例。
jest单元测试——项目实战
fish_skyyyy的博客
04-07 1303
包括：什么是单元测试、jest的基本配置、快照测试、mock函数、常用断言、前端单测策略等等。。
使用jest进行单元测试
岩家兴的博客
08-18 120
以前，写完一段代码我也是直接调用或者实例化一下，发现过了就把测试相关部分删了。今年的不幸与坎坷使我有很长一段时间去思考人生，不想将就了，鲁棒健壮的程序，开发和测试应该是分得很开的，于是我选择jest去做单元测试这件事。 为什么要做单元测试 在开始之前，我们先思考这样一个问题，我们为什么要做单元测试？ 不扯犊子直接说吧，第一点，用数据、用茫茫多的测试用例去告诉使用者，你的程序是多么鲁棒健壮；第...
Jest单元测试
前端精髓
10-19 3264
一般我们写完代码会这样测试 function sum (a, b) { return a + b } // 通过console输出值跟预期的结果对比 console.log(sum(1, 2), 3) 上线的时候会把console都删掉，但是别人使用的时候又会测一下这个功能是否正常 使用Jest测试，可以避免这样的问题出现 开始使用 安装jest和@types/jest包含的声明文件，声明文...
单元测试learn-jest.zip
12-09
本教程将深入探讨如何使用Jest进行单元测试。 一、Jest入门 Jest是由Facebook维护的，它提供了一个全面的测试解决方案，包括模拟（mocking）、自动刷新、快照测试等功能。安装Jest非常简单，只需要在项目中运行`npm...
详解使用jest对vue项目进行单元测试
10-18
主要介绍了详解使用jest对vue项目进行单元测试，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
如何为vue的项目添加单元测试
10-17
主要介绍了如何为vue的项目添加单元测试，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使用 React 和 Redux 进行井字游戏并附带源代码.zip
最新发布
07-24
项目：使用 React 和 Redux 进行井字游戏并附带源代码 使用 react 和 redux 的井字游戏是一个简单的 react 项目。整个项目都是使用 react components 和redux制作的。游戏很简单，玩法也很多。要运行此项目，您必须先安装 NodeJS。 关于项目 井字游戏反应而 redux 是使用ReactJS开发的。说到这个游戏，它具有高级功能和游戏玩法。要运行此项目，首先，您必须安装费用到您的系统。然后运行npm安装然后开始运行npm开始。游戏启动后，您可以选择不同的游戏选项。您还可以选择所需的网格框数量。此外，您还可以选择对手的类型。 要运行此项目，您需要 在计算机上安装NodeJS 并使用现代浏览器，例如 Google Chrome、  Mozilla Firefox。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
使用 JavaScript 编写的专注力游戏（附源代码）.zip
07-24
项目：JavaScript 中的专注力游戏（附源代码） 专注力游戏是一个使用 JavaScript、CSS 和 HTML 开发的简单项目。这款游戏很有趣。玩家必须点击移动的框并获得分数。要点击正确的位置，玩家需要在这个游戏中集中注意力。这款游戏可以帮助玩家练习以进一步增强他们的专注力。 游戏制作 这个游戏项目仅使用 HTML、CSS 和 JavaScript。说到这个游戏的特点，用户必须单击移动框并得分。游戏有三种模式：简单、中等和困难。游戏的 PC 控制非常简单。您只需使用光标单击移动框的碎片即可。 该游戏包含大量的 javascript 以确保游戏正常运行。 如何运行该项目？ 要运行此游戏，您不需要任何类型的本地服务器，但需要浏览器。我们建议您使用现代浏览器，如 Google Chrome 和 Mozilla Firefox。要玩游戏，首先，单击 index.html 文件在浏览器中打开游戏。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
人脸识别方案资料61EDA-C1590.zip
07-24
人脸识别方案资料61EDA_C1590.zip
316、基于DK124设计的离线式开关电源设计12V 2A（原理图、PCB图、BOM表、设计说明）
07-24
316、基于DK124设计的离线式开关电源设计12V 2A（原理图、PCB图、BOM表、设计说明） 该设计为DK124控制的开关电源，实现12V 2A输出； 功能： 1、使用DK124核心控制； 2、反激式开关电源拓扑设计； 3、实现12V 2A输出； 4、市电输入； 5、整流、滤波、变压器等电路； 6、原理图、PCB图、BOM表、设计说明；
Jest 单元测试入门
06-06
Jest 是一个流行的 JavaScript 测试框架，可以用于编写单元测试、集成测试和端到端测试。下面是 Jest 单元测试入门的步骤： 1. 安装 Jest 使用 npm 安装 Jest：`npm install --save-dev jest` 2. 编写测试用例 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值