Jest测试(七)React中的TDD与单元测试

最新推荐文章于 2024-05-09 21:11:29 发布
最新推荐文章于 2024-05-09 21:11:29 发布
阅读量279 收藏
点赞数
分类专栏： 前端自动化测试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yexudengzhidao/article/details/107445127
版权

Test Driven Development（TDD）测试驱动的开发

在这里插入图片描述

在这里插入图片描述

React环境中配置jest

  1. 创建一个react项目，create-react-app默认集成了jest，默认配置文件在package.json里，我们也可以把他单独拿出来放在jest.config.js文件里。

Enzyme

在这里插入图片描述
enzyme是对react-dom的render做了封装

shallow 浅层渲染 适合单元测试
mount 全渲染 适合集成测试
const wrapper = shallow(<App />);

安装jest-enzyme

代码覆盖率

在这里插入图片描述
在这里插入图片描述

. . . . .
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端自动化测试jest教程9-TDD+单元测试，BDD+集成测试
Jsoning的博客
01-20 2465
准备条件 以第1节教程的创建的目录和代码为基础进行讲解。如果没有看过第1节教程，请关注我，查看以往该系列的文章 这节教程主要讲解TDD+单元测试，BDD+集成测试 什么是TDD？ Test Driven Development 测试驱动开发 顾名思义，就是我们先根据需求去写测试用例，根据测试用例再去写我们的功能。当我们增加或者修改某一项需求的时候，首先修改的是测试用例，根据测试用例再去修改代码逻辑...
初探：使用Jest进行React单元测试
不怕麻烦的鹿丸的博客
11-29 1127
会在根目录下生成coverage文件夹，里面有index.html 文件可以打开查看覆盖率。在React项目里，如果你使用 Create React App，craco.config.js文件里可以配置jest参数。在src文件夹目录下，有setupTests.js文件。执行npm run test 进行单元测试。且包含许多实用的默认配置。
【从Jest入门到 TDD,BDD双实战】Jest 前端自动化测试框架基础入门②
Write less，do more
12-21 380
一：前端自动化测试产生的背景及原理 二：构建基础结构 1.创建文件夹 2.创建index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width
2024年用Jest来给React完成一次妙不可言的~单元测试，2024年最新好文推荐
最新发布
2401_84562377的博客
05-09 505
如果没有存储，它将创建一个新的存储，如果它没有接收初始状态或存储，它将返回一个空对象。对于第一个测试，我们检查内容是否等于About页面中的文本，对于第二个测试，我们测试路由参数并检查它是否正确通过。正如您在这里看到的，我们有一个简单的组件，它有一个用于发出请求的按钮。正如您在这里看到的，我们有一个简单的组件，它有一个用于发出请求的按钮。快照，顾名思义，允许我们保存给定组件的快照。与前面的React Redux部分一样，这里我们使用相同的方法，创建一个助手函数。正如您所看到的，语法与前面的测试非常相似。
软件测试技术之利用 Jest 为 React 组件编写单元测试
xuezhangmen的博客
01-16 733
React 最早是被用来开发网页的，所以早期的 React 库中还包含了大量和 DOM 相关的逻辑。唯一不同的地方在于 React 组件的单元测试中我们需要找到合适的方法对执行结果进行断言。Enzyme 底层其实也是基于 react-test-renderer 和react-dom/test-utils 的。如果你能理解前面对 react-test-renderer 和 react-dom/test-utils 的介绍，那么上手 Enzyme 应该是非常容易的。不会包含用户开发的组件的信息。
利用 Jest 和Enzyme构建 TDD 应用程序
jiaoqi6132的博客
09-22 451
第一章 浅层渲染(Shallow Renderer) 当为 React 写单元测试时，浅层渲染(Shallow Renderer) 会变得十分有用。浅层渲染使你可以渲染 “单层深度” 的组件，并且对组件的 render 方法的返回值进行断言，不用担心子组件的行为，组件并没有实例化或被渲染。浅渲染并不需要 DOM。 第一节 概述 1.1 简单的使用 要开始使用 Jest，你不需要安装任何东西; 它是 Create React App 的一部分。如果查看 package.json 文件，您将看到已经有一个脚本
react-tdd-workshop:TDD与React研讨会
05-11
我们将使用React + Jest + Puppeteer，几乎所有TDD（几乎）构建游戏，而无需打开浏览器！ 最终结果将是这样的： 作坊 到目前为止，我们所拥有的（或：我在研讨会上展示的部分） 启动新游戏的浏览器测试。 第一次...
单元测试learn-jest.zip
12-09
在软件开发过程中，单元测试是一种重要的质量保证手段，它能够帮助开发者确保代码的各个独立模块按预期工作。Jest是一款非常流行的JavaScript测试框架，尤其在React社区中广泛使用。本教程将深入探讨如何使用Jest...
TDD-React-Study：带有#jest和#enzyme测试库的#reactjs中的测试驱动开发（#TDD）
02-13
它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 最小化构建，文件名包含哈希。 您的应用已准备好进行部署！ 有关更多信息，请参见有关的部分。 yarn eject 注意：这是单向操作。 eject ，您将...
react-简单而完整的ReactDOM测试工具鼓励良好的测试实践
08-15
9. **测试驱动开发(TDD)**：通过使用`react-testing-library`，开发者可以在实现功能之前先编写测试，遵循TDD原则，提高代码质量。 10. **持续集成(CI)**：将测试集成到CI/CD流程中，每次代码提交时自动运行测试，...
react-legittests可链接易于读取的React测试库
08-15
3. **React组件测试**：React Legit Tests专门针对React组件设计，提供了一套与React生态系统紧密集成的API，使得测试React组件变得简单直接。它可以轻松地模拟组件的props、state以及生命周期方法，帮助开发者全面...
react-app-jest-enzyme-tdd:具有测试驱动开发的React，Redux，Jest，Enzym，Hooks和上下文代码
05-13
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。 yarn build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。 yarn eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。 相反，它将所有配置文件和传递依赖项（webpac
tdd-react-es6:入门项目专注于使用React，ES6和Jasmine进行测试驱动的开发（TDD）
05-12
使用React和es6的TDD 入门项目专注于通过React，ES6和Jasmine促进测试驱动开发（TDD） 工具： Webpack 业力 巴别塔 指令 git clone git@github.com:leocristofani/tdd-react-es6.git npm install npm run watch npm run test
ts-tdd-jest:带Jest的TDD + TypeScript
03-19
ts-tdd-jest 31天
如何使用TDD和React Testing Library构建健壮的React应用程序
YooHoeh的博客
05-26 3632
如何使用TDD和React Testing Library构建健壮的React应用程序 当我开始学习React时，我努力的一件事就是以一种既有用又直观的方式来测试我的web应用程序。 每次我想测试它时，我都会用Jest的 Enzyme来渲染一个组件。 当然，我绝对滥用快照测试功能。 那么，至少我写了一个测试吧？ 您可能听说过编写单元和集成测试会提高您编写的软件的质量。 另一方面，不好的测试...
我是这样在 React 中实践 TDD 编程的
前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
04-21 742
在Redux中编写测试听起来肯定有悖直觉。如果您使用了Redux，它可能看起来更加复杂。 然而，在添加功能之前编写测试有助于编写更好的代码，因为你预先考虑了将使用的设计模式、体系结构和变量的名称。 我们正在构建一个用户管理仪表板。基本上，使用Redux，我们想执行CRUD操作。 用户可以: 创建用户 更新用户 删除用户 获取用户或用户列表 这个小项目中的用户将有四个属性: id\name\username\email 为了简单起见，我们不编写UI代码。我们将主要关注于创建一个测试环境，编写测试，并.
react使用jest进行单元测试
HongfeiAn
08-28 1531
1.什么是单元测试 ​ 单元测试又称模块测试，是针对程序模块（软件设计的最小单位）来进行正确性检验的测试工作。程序单元是应用的最小可测试部件。 单元可以是一个函数，一个样式，我感觉项目的每一个部分，功能，样式都可以说是单元 2.为什么要单元测试 ​ 做前端的很多人可能不会去写单元测试，认为这是一个浪费时间的事情，我们有这么多的需求，哪还有时间跟精力去编写测试代码？这么想当然没有错，但是当一个项目由多人一起维护的时候，假如A写了一个页面，B去维护A的页面加了一些逻辑，C去维护该页面再添加一些逻辑，当A再
用React hooks实现TDD
teobler的博客
02-17 598
本文首发于我的个人博客: https://teobler.com, 转载请注明出处 由于篇幅所限文章中并没有给出demo的所有代码，大家如果有兴趣可以将代码clone到本地从commit来看整个demo的TDD过程，配合文章来看会比较清晰。本文涉及的所有代码地址: teobler/TDD-with-React-hooks-demo 前端TDD的痛 从进公司前认识了TDD，到实践TDD，过程中自...
React-如何进行组件的单元测试
柒青衿的博客
09-04 8578
什么是单元测试 一般测试分成几个类型：单元测试、集成测试、功能测试。集成测试和功能测试不赘述。单元测试是用来对一个模块、一个函数或者一个类来进行正确性检验的测试工作，这里的单元是程序工作的最小工作单位。单元测试应该仅仅依赖输入，不依赖多余的环境，如果你的单元测试依赖很多环境，那么你可能需要的是集成测试。 单元测试又可以根据开发模式分成以下两类： 1. TDD, TDD指的是Test Driv...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

. . . . .

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值