jest单元测试-基础

一、认识前端自动化

随着前端的发展，前端设计的领域已经越来越多，也越来越复杂。这就对我们前端工程化能力，提出了更高的要求。好的前端工程化一般包括三个大的方面：

前端自动化测试（前提条件）
高质量的代码设计
高质量的代码实现

二、市面主流的前端测试框架

Jasmine （茉莉花）： JavaScript测试框架（BDD-集成测试开发框架），这个也算是比较早的测试框架；
MOCHA（摩卡）: 它是一个功能丰富的JavaScript测试框架，运行在Node.js和浏览器中，使异步测试变得简单有趣。也是非常优秀的框架；
Jest：目前最流行的前端测试框架，几乎国内所有的大型互联网公司都在使用；

三、jest前端测试框架的优点

比较新：喜新厌旧是人的天性，新技术出来后我们总想动手尝试一下
基础很好：框架基础好就是性能好、功能多、简单易用，Jest在这三个方面你可以完全放心。绝对是一把好手，干就完事了。
速度快：单独模块测试功能，比如说有两个模块A和B，以前都测试过了，这时候你只改动A模块，才次测试，模块B不会再跑一次，而是直接测试A模块。这就好比你去‘大宝剑’，你所有技师都试过了一次，下次你再来，直接就找最好的就行了。不用再测试一遍。（安心、放心）
API简单：看一下官网，你就会发现API非常简单，数量也少。
隔离性好：Jest里会有很多的测试文件等待我们使用，Jest的执行环境都是隔离，这样就避免不同的测试文件执行的时候互相影响而造成出错。
IDE整合：Jest直接可以和很多编辑器（VSCode）进行融合，让测试变的更加简单。
多项目并行：比如我们写了Node.js的后台项目，用React写了一个前台项目，Jest是支持他们并行运行，让我们的效率更加提高了。
快出覆盖率：（测试代码覆盖率）对于一个项目的测试都要出覆盖率的，Jest就可以快速出这样的覆盖率统计结果，非常好用。

四：测试区别

单元测试：英文是(unit testing) 单,是指对软件中的最小可测试单元进行检查和验证。前端所说的单元测试就是对一个模块进行测试。也就是说前端测试的时候，你测试的东西一定是一个模块。
集成测试：也叫组装测试或者联合测试。在单元测试的基础上，将所有模块按照涉及要求组装成为子系统或系统，进行集成测试。

五、环境搭建+初始化配置

初始化一个项目 npm init
安装jest框架，因为这个只是开发使用 yarn add jest -D
npx jest --init 或者全局安装jest初始化

六、基础必会方法

test方法：Jest封装的测试方法，一般填写两个参数，描述和测试方法，这个是测试的最小单元，不允许嵌套
expect方法：预期方法，就是你调用了什么方法，传递了什么参数，得到的预期是什么(代码中详细讲解)。

test('test',() => {expect("1").toBe("1");
})

七、基本配置和覆盖率文件详解

1.jest.config.ts

export default {clearMocks: true, // 是否每次运行清除mockcollectCoverageFrom: ['src/*.{js,ts}', 'src/**/*.{js,ts}'], //覆盖率文件coverageDirectory: 'coverage', // 生成覆盖率的文件名coverageProvider: 'v8', coverageThreshold: { // 覆盖率阈值global: {branches: 90,functions: 95,lines: 95,statements: 95,},},moduleFileExtensions: ['ts', 'tsx', 'js', 'json', 'jsx', 'node'], // 文件扩展preset: 'ts-jest', //tssetupFilesAfterEnv: [ // 每次test的启动文件，类似main.ts"<rootDir>/__tests__/boot.ts"],testEnvironment: 'jest-environment-jsdom', // jstestRegex: '(/__tests__/.+\\.(test|spec))\\.(ts|tsx|js)$', // 要进行test的文件正则
};

2、package.json 启动配置,

"scripts": {"test": "jest","test:w": "jest --watchAll","test:c": "jest --coverage", //  生成覆盖率文件},

3、运行yarn test :c

------------|---------|----------|---------|---------|-------------------
File        | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
------------|---------|----------|---------|---------|-------------------
All files   |     100 |    89.47 |     100 |     100 |01demo.js  |     100 |       50 |     100 |     100 | 203es6.js   |     100 |       50 |     100 |     100 | 204async.js |     100 |      100 |     100 |     100 |05hook.js  |     100 |      100 |     100 |     100 |
------------|---------|----------|---------|---------|-------------------Test Suites: 6 passed, 6 total
Tests:       28 passed, 28 total
Snapshots:   0 total
Time:        9.378 s, estimated 11 s
Ran all test suites.
✨  Done in 10.55s.

%stmts是语句覆盖率（statement coverage）：是不是每个语句都执行了？
%Branch分支覆盖率（branch coverage）：是不是每个if代码块都执行了？
%Funcs函数覆盖率（function coverage）：是不是每个函数都调用了？
%Lines行覆盖率（line coverage）：是不是每一行都执行了？

专业术语里，把describe包含的块叫做suite，把it/test包含的块叫做specification，也简称为spec，在一个suite里面可以包含多个数量的spec，但是也要注意结构化语义化。

代码参考github地址

1、jest单元测试-基础

2、jest单元测试-匹配器

3、jest单元测试-作用域

4、jest单元测试-更多

原创不易，自由转载，保留出处

jest单元测试-基础相关推荐

万字详文：彻底搞懂 Jest 单元测试框架
点击上方前端瓶子君,关注公众号回复算法,加入前端编程面试算法每日一题群什么是Jest 测试意味着什么我怎么知道要测试什么测试块,断言和匹配器如何实现测试块如何实现断言和匹配器 CLI 和 ...
vue jest单元测试
一.渲染: mount 和 shallowMount 1.1 mount 和 shallowMount vue-test-utils 提供了两种方式用于渲染,或者说加载(mount) 一个组件 - ...
React 16 Jest单元测试之 Jest工具
转载地址 React 16 Jest单元测试之 Jest工具项目初始化[这里使用之前的项目,节省时间] 项目初始化地址 https://github.com/durban89/webpack4-r ...
React 16 + Jest单元测试之 Mock Functions(Mock Names 和 Custom Matchers)
转载 React 16 + Jest单元测试之 Mock Functions(Mock Names 和 Custom Matchers) 项目初始化[这里使用之前的项目,节省时间] 项目初始化地址 ...
Jest 单元测试 enzyme 报错信息：When using mount: Cannot read prop
报错信息:报错信息:When using mount: Cannot read property 'child' of undefined on React 17 jest 单元测试需要为酶倒入Re ...
GO随笔-单元测试-基础测试
单元测试前几天,Leader让我学习GO单元测试并且组内分享.经过这些天在网上查阅资料和实践.总结出以下内容. 基础知识: GO为我们提供了测试框架,go test,让我们能够很容易的进行单元测试. ...
jest 单元测试模拟模块设置动态值
在单元测试中需要对组件进行动态.极端.正常状态测试,如果组件里使用了api那么我们想对组件进行接口多种不同响应进行测试时候就需要对模块进行动态值设置. mockFun.mockImplementati ...
Jest 单元测试快速入门
测试的类型单元测试集成测试端到端测试(E2E) 测试 React 组件需要解决两个关键问题怎么渲染待测试组件: 怎么测试渲染出来的组件: 浅层渲染对于组件渲染,Airbnb 作为重度使用 R ...
react生态下jest单元测试
一:jest框架搭建 1.在本地创建一个目录jest_practice 2.使用编辑器VScode打开目录,紧接着在终端中打开,执行npm init 3.执行以下命令: 注意:这里我们使用cnpm去安 ...
python基础知识测试题_Python中的单元测试—基础知识
python基础知识测试题 Unit testing is the number one skill which separates people who just finished their de ...

jest单元测试-基础

jest单元测试-基础

一、认识前端自动化

二、市面主流的前端测试框架

三、jest前端测试框架的优点

四：测试区别

五、环境搭建+初始化配置

六、基础必会方法

七、基本配置和覆盖率文件详解

原创不易，自由转载，保留出处

jest单元测试-基础相关推荐

最新文章

热门文章