React之集成测试 – 测试概览

亚瑟 等级 342 0 0

你可以用像测试其他 JavaScript 代码类似的方式测试 React 组件。

现在有许多种测试 React 组件的方法。大体上可以被分为两类:

  • 渲染组件树 在一个简化的测试环境中渲染组件树并对它们的输出做断言检查。
  • 运行完整应用 在一个真实的浏览器环境中运行整个应用(也被称为“端到端(end-to-end)”测试)。

本章节主要专注于第一种情况下的测试策略。虽然完整的端到端测试在防止对重要工作流的多次回归方面很有价值,但对 React 组件来说这类测试并不怎么需要关注,因此不在本章节的讨论范围之内。

权衡

当挑选测试工具的时候,有些细节值得我们权衡考虑:

  • 迭代速度 vs 真实环境: 一些工具在做出改动和看到结果之间提供了非常快速的反馈循环,但没有精确的模拟浏览器的行为。另一些工具,也许使用了真实的浏览器环境,但却降低了迭代速度,而且在持续集成服务器中不太可靠。
  • mock 到什么程度: 对组件来说,“单元测试”和“集成测试”之间的差别可能会很模糊。如果你在测试一个表单,用例是否应该也测试表单里的按钮呢?一个按钮组件又需不需要有他自己的测试套件?重构按钮组件是否应该影响表单的测试用例?

不同的团队或产品可能会得出不同的答案。

推荐的工具

Jest 是一个 JavaScript 测试运行器。它允许你使用 jsdom 操作 DOM 。尽管 jsdom 只是对浏览器工作表现的一个近似模拟,对测试 React 组件来说它通常也已经够用了。Jest 有着十分优秀的迭代速度,同时还提供了若干强大的功能,比如它可以模拟 modulestimers 让你更精细的控制代码如何执行。

React 测试库 是一组能让你不依赖 React 组件具体实现对他们进行测试的辅助工具。它让重构工作变得轻而易举,还会推动你拥抱有关无障碍的最佳实践。虽然它不能让你省略子元素来浅(shallowly)渲染一个组件,但像 Jest 这样的测试运行器可以通过 mocking 让你做到。

了解更多

这一章节被划分成了两页内容:

  • 技巧:为 React 组件编写测试时的常见模式。
  • 环境:为 React 组件搭建测试环境的时候有哪些要考虑的东西。

本文转自 https://react.docschina.org/docs/testing.html,如有侵权,请联系删除。

收藏
评论区

相关推荐

为什么 React 源码不用 TypeScript 来写?
周末的,看点轻松的吧,之前看过 React 的源码,比较好奇像 React 这样庞大的工程为什么没有用 TypeScript。 Facebook 工程师 Cat Chen 在知乎上(https://www.zhihu.com/question/378470381/answer/1079675543(https://www.zhihu.com/quest
2020年值得你去试试的10个React开发工具
2020年值得你去试试的10个React开发工具 2020年值得你去试试的10个React开发工具 本文由葡萄城技术团队翻译并首发 转载请注明出处:葡萄城官网(https://www.
25、react入门教程
25、react入门教程 25、react入门教程 0. React介绍 0.1 什么是React? React(有时称为React.js 或ReactJS)是一
Angular vs React 最全面深入对比
Angular vs React 最全面深入对比 Angular vs React 最全面深入对比 本文参考文章:https://www.sitepoint.com/reactvsangul
Create React App
Create React App Create React App Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 createreactapp(ht
React系列之高阶组件
我的前端学习笔记📒 最近花了点时间把笔记整理到语雀上了,方便童鞋们阅读 我的前端学习笔记📒(https://www.yuque.com/wanggangfeng
做了N+1个企业项目之后, 我总结了这些React必备插件
为了提高大家开发 React 项目的效率, 笔者结合自己的实际工作经验, 汇总如下React项目常用插件. 1. 状态管理 Redux JavaScript 状
一起走进React核心团队
当我刚来Facebook的React团队工作时,我不确定接下来的工作会怎么样。表面看,React核心团队似乎很大!但事实证明,像Eli White和Sebastian McKenzie这样的人都在React Native团队。考虑加上那些维护开源库的维护者,比如Chakra UI、Framer Motion,React核心团队人数似乎能填满整个体育场!但事实
做了N+1个企业项目之后, 我总结了这些React必备插件
为了提高大家开发 React 项目的效率, 笔者结合自己的实际工作经验, 汇总如下React项目常用插件. 1. 状态管理 Redux JavaScript 状
Hook 简介 – React
Hook 简介 _Hook_ 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 import React, { useState } from 'react'; function Example() { // 声明一个新的叫做 “count” 的 sta
Hook 规则 – React
Hook 规则 _Hook_ 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 Hook 本质就是 JavaScript 函数,但是在使用它时需要遵循两条规则。我们提供了一个 linter 插件(https://www.npmjs.com/package/
React的未来:服务端组件
作者 | Donovan So 译者 | 许学文 策划 | 蔡芳芳 服务端组件和 SSR 有哪些不同? 本文最初发布于 Medium 的 Donovan So 专栏,经 InfoQ 翻译并分享。 服务端组件是什么? 截至目前,我们对 React 组件的了解只是客户端组件,仅此而已。 然而,React 团队正在试验一个新的想法,那就是将 Reac
记录一下我离线依赖迁移安装的具体尝试过程
首发于 <a name"F7lHq"</a 第 1 次直接安装,不可行,因为是私有依赖,根本安装不上。<a name"elctO"</a 第 2 次流程:1. 拷贝依赖到项目目录 library 中1. 通过 webpack alias 别名的方式关联依赖<br /不可行,npm run start 运行报错,缺少依赖。 想想也是, 依
Hook 规则 – React
Hook 规则_Hook_ 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。Hook 本质就是 JavaScript 函数,但是在使用它时需要遵循两条规则。我们提供了一个 来强制执行这些规则: 只在最顶层使用 Hook不要在循环,条件或嵌套函数中调用 Hoo
如何在React Native和Expo中掩盖Text和TextInput组件
在本文中,我将向您展示如何在React Native和Expo中使用自定义蒙版,可用于iOS,Android和Web!我们将使用一个名为库,这是一个没有本机代码的完整javascript库,然后您可以在React Native环境的所有CLI中使用。](https://res.cloudinary.com/practicaldev/image/fetch/s