不熟悉的 Jest 测试

编程杂货铺
188 阅读3分钟

Jest测试工具

写文章的目的是：我们应该在以前的学习认知的水平上进行学习，而不是一次次的重复，用文章记录我们的学习，先散然后才能成章。

跟着 jest 官方网站学些 jest 测试，帮助我们编写更好质量的代码

前端测试工具 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 测试的几种方式

  1. 文件单独测试，test、it 等方法
  2. 文件中几种测试， describe
  3. __test__ 存放测试文件

没有涉及的项目

  • 异步测试
  • 测试接口
  • mock
  • 实际开发过程中，我们要测试哪些东西？
    • 接口测试
    • ui 测试
    • 功能测试
    • 断言测试

测试风格

  • TDD 测试驱动型开发，在开发前先写好测试用例
  • BDD 是先开发代码，然后进行测试，这个是一些很常规的做法
  • 个人觉得一个开发提高自信度的使用 TDD 来进行开发，这样我们会更加的专业。

测试覆盖率

我们要生成测试覆盖率相关的信息有两种方案：

  1. 在控制台中生成响应的测试信息, 就需要添加 npm 脚本：
{
    "scripts": {
    "test": "jest --watch --coverage",
    }
}
  1. 使用配置文件
{   
    collectCoverage: true,
    collectCoverageFrom: [
        "./src/**/*.{js, vue}",
        "!node_modules/**"
    ],
    coverageDirectory: './coverage',
}

下面介绍测试覆盖率的相关的数据：

  1. %stmts:（statement coverage）语句覆盖率
  2. %Branch: （branch coverage）分支覆盖率（条件判断分析）
  3. %Funcs: （function coverage）函数调用覆盖率
  4. %Lines: （line coverage）文件行运行覆盖率

总结

  1. jest 的安装与基本使用
  2. 理解 test 方法
  3. 理解 expect 方法
  4. 理解 jest 测试的匹配器
  5. 练习熟练使用 jest 的匹配器
  6. 这些基本的使用还是跟 javascript 的数据类型有关系，匹配基础类型的值（string, number, floatnumber, boolean, undefined, false, true, null）处理方式定义的不同，处理引用类型的值的时候,还有正则来匹配引用类型的值。

参考

  1. www.cnblogs.com/SamWeb/p/11…
avatar
文章
阅读
粉丝