学习jest测试,编写更好质量的代码

发表于:2020-9-27 09:54

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:逍遥_乔治    来源:掘金

  前端测试工具 jest, 我们阅读 Jest 官方文章之后,使用 Jest 从简单到深入的学习 Jest 的测试,方便我们编写高质量的组件。
  安装jest
yarn add --dev jest

# 全局安装
yarn add global jest
  在根目录创建 /test/index.test.js
  从简单的测试函数开始
// index.test.js
test('plus', () => {
    expect(1+2).toBe(3)
})

// 得到如下的结果
Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        1.828s
  test 方法
  如果使用过glup的话,这里 test 函数就好比 gulp 的 task 任务。这里理解为 test 任务。
  任务 plus 的作用: expect 的值,与toBe 的值进行对比。
  期望 expect
  expect(value), expect函数的参数是 value 表示一个值。其中expect函数的返回是一个期望对象,期望对象具有 toBe 方法,所以这就能构成一个闭环。
  匹配器
  简单匹配器
  toBe 是一个匹配器,期望值(是js原值值类型)与匹配器里面的值进行对比匹配。
  toEqual 是个匹配器,匹配的是 引用类型的值如 array, object, 进行对比。
  not 也是一个修饰器,用于取反
  真实性测试匹配器
  有时候我们需要严格的区分 undefined, null, false,
  // 匹配上面特定的值
  toBeNull
  toBeUndefined
  toBeDefined // 匹配真值,匹配假值
  toBeTruthy
  toBeFalsy
  定义分为两种: 定义toBeDefined, 没有定义 toBeUndefined.
  数字比较
  等于 ==: toBe toBeEqual
  小于等于 <= toBeLessThan, toBeLessThanOrEqual
  大于等于 >= toBeGreaterThan,toBeGreaterThanOrEqual
  浮点型数据需要单独的使用 toBeCloseTo,而不能使用 toEqual.
  字符串类型
  字符串类型,最多的就是用 regexp 来匹配,所以我们还是要把正则表示学好呀!
  toMatch 方法中间使用我们需要的正则表达式
  toMatch 还可以作用与数组,和对象中是不是含有这个我们要匹配的值。
  错误处理
  定义个函数,使用函数的形式来在test的时候抛出一个错误。
  toThrow 来处理相关的内容
function compileAndroidCode() {
  throw new Error('you are using the wrong JDK')
}

test('compiling android goes as expected', () => {
  expect(compileAndroidCode).toThrow();
  expect(compileAndroidCode).toThrow(Error)

  // You can also use the exact error message or a regexp
  expect(compileAndroidCode).toThrow('you are using the wrong JDK');
  expect(compileAndroidCode).toThrow(/JDK/);
})
  jest 测试的几种方式
  文件单独测试,test、it 等方法
  文件中几种测试, describe
  __test__ 存放测试文件
  没有涉及的项目
  异步测试
  测试接口
  mock
  实际开发过程中,我们要测试哪些东西?
  接口测试
  ui 测试
  功能测试
  断言测试
  测试风格
  TDD 测试驱动型开发,在开发前先写好测试用例
  BDD 是先开发代码,然后进行测试,这个是一些很常规的做法
  个人觉得一个开发提高自信度的使用 TDD 来进行开发,这样我们会更加的专业。
  测试覆盖率
  我们要生成测试覆盖率相关的信息有两种方案:
  1.在控制台中生成响应的测试信息, 就需要添加 npm 脚本:
{
    "scripts": {
    "test": "jest --watch --coverage",
    }
}
  2.使用配置文件
{   
    collectCoverage: true,
    collectCoverageFrom: [
        "./src/**/*.{js, vue}",
        "!node_modules/**"
    ],
    coverageDirectory: './coverage',
}
  下面介绍测试覆盖率的相关的数据:
  %stmts:(statement coverage)语句覆盖率
  %Branch: (branch coverage)分支覆盖率(条件判断分析)
  %Funcs: (function coverage)函数调用覆盖率
  %Lines: (line coverage)文件行运行覆盖率
  总结
  jest 的安装与基本使用
  理解 test 方法
  理解 expect 方法
  理解 jest 测试的匹配器
  练习熟练使用 jest 的匹配器
  这些基本的使用还是跟 javascript 的数据类型有关系,匹配基础类型的值(string, number, floatnumber, boolean, undefined, false, true, null)处理方式定义的不同,处理引用类型的值的时候,还有正则来匹配引用类型的值。

  本文内容不用于商业目的,如涉及知识产权问题,请权利人联系51Testing小编(021-64471599-8017),我们将立即处理
《2023软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号