React实战-React标配单元测试工具Jest

亦凉 2022-07-16 01:52 206阅读 0赞

React实战\-React标配单元测试工具Jest

目前Javascript的测试工具很多，但是针对React的测试策略，Facebook推出的ReactJs标配测试工具是Jest.Jest的官网地址：https://facebook.github.io/jest/。我们可以看到Jest官网宣称的是：Painless JavaScript Testing。是Facebook用于测试服务和React应用程序的JavaScript单元测试框架。

所谓单元测试也就是对每个单元进行测试，通俗的将一般针对的是函数，类或单个组件，不涉及系统和集成。单元测试是软件测试的基础测试。Jest主要有以下特点：

l 适应性：Jest是模块化、可扩展和可配置的。

l 沙箱和快速：Jest虚拟化了JavaScript的环境，能模拟浏览器，并且并行执行

l 快照测试：Jest能够对React 树进行快照或别的序列化数值快速编写测试，提供快速更新的用户体验。

l 支持异步代码测试：支持promises和async/await

l 自动生成静态分析结果：不仅显示测试用例执行结果，也显示语句、分支、函数等覆盖率。

1.为什么要使用单元测试工具

我们在开发过程中，不使用测试工具依然可以自己写代码进行单元测试，但是我们的代码存在着相互调用关系，在测试过程中我们又希望使单元相对独立而又能正常运行，就需要我们对被测函数的依赖函数和环境进行mock，并且在测试数据输入、测试执行和测试结果检查方面存在很多相似性，测试工具正是为我们在这些方面提供了方便。

2.如果使用Jest

使用Jest的过程并不复杂，主要分以下几步：

a.配置Jest

与使用所有的Js包一样：可以先配置package.json，再执行npm install。也可以直接采用npm install --save-dev jest命令。

b.编写测试脚步

例如被测函数为：

function sum(a,b)\{

return a + b;

\};

module.exports = sum;

测试脚步：

test('add 1+2 equal 3',()=>\{

const sum = require('./sum');

expect(sum(1,2)).toBe(3);

\});

c.执行脚本

执行脚本也可以有多种方式：

1）在配置文件中配置

"scripts": \{

"test": "jest"

\},

2）直接执行命令

需要安装全局jest命令: npm install -g jest。

直接进入项目，执行命令:jest

d.查看测试结果

脚步执行后可直接看到测试结果，自动显示测试用例的执行结果和测试用例数量。如果想看到覆盖率:jest --coverage

3.使用约束

使用jest可能会奇怪，jest是如何在源码文件中找到测试脚步并执行的。配置文件中并没有配置测试脚本的入口。其实在jest中我们对脚步的定义是有约束的，可以采用以下几种方式。

l 创建\_\_tests\_\_目录，xxx-test.js

l 直接创建Xxx.test.js

l 直接创建xxx.spec.js

发表评论取消回复

表情：

评论列表（有 0 条评论，206人围观）

还没有评论，来说两句吧...

相关阅读

相关精通 React 测试：Jest、Enzyme 和 React 测试库综合指南

概述测试是软件开发过程中至关重要的一部分，React 应用程序也不例外。在这份综合指南中，我们将讨论 Jest 和 Enzyme 等各种测试框架，并探讨如何有效地为 Re

曾经终败给现在/ 2024年03月16日 13:06/ 0 赞/ 12 阅读

相关如何使用Jest测试你的React组件

> 在本文中，我们将了解如何使用[Jest][]（Facebook 维护的一个测试框架）来测试我们的[React][]组件。我们将首先了解如何在纯 JavaScript 函数上

落日映苍穹つ/ 2023年10月13日 19:03/ 0 赞/ 41 阅读

相关 jest 单元测试，配置+注释

"jest": { "//": "转换器表示用 ts-jest 工具把 .ts | .tsx 文件内容转换为 js", "//":"因

川长思鸟来/ 2023年07月06日 14:47/ 0 赞/ 25 阅读

相关前端React使用Jest单元测试

> 感谢内容提供者：[金牛区吴迪软件开发工作室][Link 1] 文章目录一、认识单元测试二、前端怎么做单测三、使用jest 1.配

╰+哭是因爲堅強的太久メ/ 2022年08月31日 07:26/ 0 赞/ 284 阅读

相关 React实战-基于Storybook的React组件测试

React实战\-基于Storybook的React组件测试 ReactJs的测试方法和测试工具很多，主要有Jtest、Karma,但是有一些小的第三方工具也很简单、方便，其

拼搏现实的明天。/ 2022年07月18日 08:40/ 0 赞/ 2397 阅读

相关 React实战-React标配单元测试工具Jest

React实战\-React标配单元测试工具Jest 目前Javascript的测试工具很多，但是针对React的测试策略，Facebook推出的ReactJs标配测试工具是

亦凉/ 2022年07月16日 01:52/ 0 赞/ 207 阅读

相关 jest单元测试-更多

jest单元测试之更多一、[jest.fn][] jest中的函数，具有跟踪性，可以测试是否被调用？调用几次？入参是否是期望值？ it("should

喜欢ヅ旅行/ 2021年09月08日 13:56/ 0 赞/ 542 阅读

相关 jest单元测试-作用域

jest单元测试之作用域一、hook钩子函数 1. beforeAll：在所有测试用例之前进行执行 2. afterAll ：在所有测试用例之后执行一次

深碍√TFBOYSˉ_/ 2021年09月08日 13:54/ 0 赞/ 381 阅读

相关 jest单元测试-匹配器

jest单元测试之匹配器一、匹配器 1、toBe 严格相等,值引用 Object.is() 2、toEqual 值相等 3、toBeNul

梦里梦外;/ 2021年09月08日 13:52/ 0 赞/ 325 阅读

相关 jest单元测试-基础

jest单元测试-基础一、认识前端自动化随着前端的发展，前端设计的领域已经越来越多，也越来越复杂。这就对我们前端工程化能力，提出了更高的要求。好的前端工程化一

傷城~/ 2021年09月08日 13:48/ 0 赞/ 561 阅读