React之集成测试 –测试环境

亚瑟 等级 764 0 0

本章节介绍了可能会影响你测试环境的因素,并包含某些场景下的建议。

测试运行器

使用 Jestmochaava 等测试运行器能像编写 JavaScript 一样编写测试套件,并将其作为开发过程的环节运行。此外,测试套件也将作为持续集成的环节运行。

  • Jest 与 React 项目广泛兼容,支持诸如模拟 模块计时器jsdom 等特性。如果你使用 Create React App,Jest 已经能够开箱即用且包含许多实用的默认配置。
  • mocha 这样的库在真实浏览器环境下运行良好,并且可以为明确需要它的测试提供帮助。
  • 端对端测试用于测试跨多个页面的长流程,并且需要不同的设置

模拟渲染表面

测试通常在无法访问真实渲染表面(如浏览器)的环境中运行。对于这些环境,我们建议使用 jsdom 来模拟浏览器,这是一个在 Node.js 内运行的轻量级浏览器实现。

在大多数情况下,jsdom 的行为类似于常规浏览器,但不具备如布局和导航的功能。这对于大多数基于 Web 的组件测试仍然有用,因为它的运行比为每个测试启动浏览器的方式效率更高。并且由于它与你编写的测试运行在同一个进程中,所以你能够编写代码来检查和断言渲染的 DOM。

就像在真实的浏览器中一样,jsdom 让我们模拟用户交互;测试可以在 DOM 节点上派发事件,然后观察并断言这些操作的副作用(例子)

可以使用上述设置编写大部分 UI 测试:使用 Jest 作为测试运行器,渲染到 jsdom,使用 act() 辅助函数(例子)提供的能力通过一系列的浏览器事件来模拟用户交互行为。例如,大量 React 自己的测试都是用这种组合编写的。

如果您正在编写一个主要测试浏览器特定行为的库,并且需要布局或真实输入等原生浏览器行为,那么你可以使用像 mocha 这样的框架。

在你 无法 模拟 DOM 环境(例如,在 Node.js 上测试 React Native 组件)的情况下,可以使用 事件模拟辅助函数 来模拟与元素的交互。或者,你也可以使用 @testing-library/react-native 中的 fireEvent 辅助函数。

诸如 Cypresspuppeteerwebdriver 等框架对于运行端对端测试 都非常有用。

模拟功能

在编写测试的时候,我们希望模拟代码在测试环境较真实环境中缺失的等效部分(例如,在 Node.js 中检查 navigator.onLine 的状态)。测试还可以监视某些功能,并观察测试的其他部分如何与它们进行交互。有选择的将这些功能模拟为测试友好的版本是很有用的。

这对于数据获取尤其有用。通常最好使用“假”数据进行测试,以避免从实际 API 端获取数据可能导致的缓慢和不稳定(例子)。这样做有助于让测试变得可预测。像 Jestsinon 这样的类库,支持模拟功能。对于端对端测试,虽然模拟网络可能更加困难,但你可能还想对真实的 API 端进行测试。

模拟模块

一些组件可能会依赖在测试环境中无法正常运行的模块,或者说这些模块对于我们的测试并不必要。那么,通过选择性地模拟来替换这些模块是很有用的(例子)

在 Node.js 中,测试运行器如 Jest 支持模拟模块。你也可以使用像 mock-require 这样的类库。

模拟计时器

组件可能会使用基于时间的函数如 setTimeoutsetIntervalDate.now 等。在测试环境中,使用可以手动“推进”时间的替代物来模拟这些功能会很有帮助。它会确保你的测试快速运行!依赖于计时器的测试仍将按照顺序解析,但会更快(例子)。大部分测试框架,包括 Jestsinonlolex 都允许你在测试中模拟计时器。

有些时候可能你不想要模拟计时器。例如,在你测试动画时,或是交互端对时间较为敏感的情况下(如 API 访问速率限制器)。具有计时器模拟的库允许你在每个测试/套件上启用或禁用这个功能,因此你可以明确地选择这些测试的运行方式。

端对端测试

端对端测试对于测试更长的工作流程非常有用,特别是当它们对于你的业务(例如付款或注册)特别重要时。对于这些测试,你可能会希望测试真实浏览器如何渲染整个应用、从真实的 API 端获取数据、使用 session 和 cookies 以及在不同的链接间导航等功能。你可能还希望不仅在 DOM 状态上进行断言,而同时也在后端数据上进行校验(例如,验证更新是否已经在数据库中持久化)。

在这种场景下,你可以使用像 Cypress 这类框架或者如 puppeteer 这样的库,这样你就可以在多个路由之间导航切换,并且不仅能够在浏览器中对副作用进行断言也能够在后端这么做。

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

收藏
评论区

相关推荐

做了N+1个企业项目之后, 我总结了这些React必备插件
为了提高大家开发 React 项目的效率, 笔者结合自己的实际工作经验, 汇总如下React项目常用插件. 1. 状态管理 Redux JavaScript 状
做了N+1个企业项目之后, 我总结了这些React必备插件
为了提高大家开发 React 项目的效率, 笔者结合自己的实际工作经验, 汇总如下React项目常用插件. 1. 状态管理 Redux JavaScript 状
2020前端面试系列之JSX是什么
**前言** 众所周知React Native开发中,页面View书写布局采用了React 的JSX语法,而在ReactNative面试中可能会遇到有关JSX相关的面试题,今天和大家分享有关JSX的知识,为你的面试助一臂之力。 **JSX的定义** JSX到底是什么?我们先看看\[React官网\](https://reactjs.org/docs/g
2020前端面试系列之JSX是什么
**前言** 众所周知React Native开发中,页面View书写布局采用了React 的JSX语法,而在ReactNative面试中可能会遇到有关JSX相关的面试题,今天和大家分享有关JSX的知识,为你的面试助一臂之力。 **JSX的定义** JSX到底是什么?我们先看看\[React官网\](https://reactjs.org/docs/g
Angular React Vue我应该选择什么?
2017 年比较 Angular、React、Vue 三剑客 ============================== 为 web 应用选择 JavaScript 开发框架是一件很费脑筋的事。现如今 [Angular](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Flink.juej
React Developers的10个超实用神奇工具
![](https://oscimg.oschina.net/oscnet/be7e96e371213baf084f2018a5e0ecd1d6e.jpg) ![](https://oscimg.oschina.net/oscnet/d1f601c7e7175b985b1000f935f5e3191f4.jpg) React是一个用于构建用户界面的Jav
React Native第三方组件和示例链接
以下是React Native的链接,有需要第三方组件或者示例的小伙伴可以收藏一下 01、React Native之Tab-View:https://js.coach/react-native/react-native-tab-view 02、React Native之正在加载Loading条:https://js.coach/react-native/
React Router 4.x 开发,这些雷区我们都帮你踩过了
前言 -- 在前端框架层出不穷的今天,React 以其虚拟 DOM 、组件化开发思想等特性迅速占据了主流位置,成为前端开发工程师热衷的 Javascript 库。作为 React 体系中的重要组成部分:React Router 也成为开发者首选的路由库,其主要功能是通过管理 url 实现组件的切换和状态的变化。 正文 -- 在 React Router
React 入门实例教程
作者: 阮一峰 日期: 2015年3月31日 现在最热门的前端框架,毫无疑问是 React 。 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑。 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 Ja
React 小白初入门
推荐学习: * React 官方文档: [https://react.docschina.org/](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Freact.docschina.org%2F) * React 菜鸟教程: [https://
React 第一个小游戏(井字棋)知识关键点
**1、React是一个声明式,高效且灵活的用于构建用户界面的JavaScript库** **通过使用组件来告诉React我们希望在屏幕上看到什么。当数据发生变化时,React会高效的更新并重新渲染我们的组件** **2、** **render返回了一个React元素,这是一种对渲染内容的轻量级描述。大多数的React开发者使用了一种名为"JSX"的特
React 设计思想
https://github.com/react-guide/react-basic React 设计思想 ========== > 译者序:本文是 React 核心开发者、有 React API 终结者之称的 Sebastian Markbåge 撰写,阐述了他设计 React 的初衷。阅读此文,你能站在更高的高度思考 React 的过去、现在和未来。
React与Vue的相同与不同点
我们知道JavaScript是世界上最流行的语言之一,React和Vue是JS最流行的两个框架。所以要想前端的开发那么必须掌握好这两个框架。 那么这两个框架有什么不同呢? **React 和 Vue 相同之处,它们都有:** * 使用 Virtual DOM * 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件
React前端开发入门与实战
**阿里云大学:[React前端开发入门与实战](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fclick.aliyun.com%2Fm%2F1000010022%2F)** 本课程主要讲解React的基础使用技巧及实战案例。 React 是一个用于构建用户界面的 JavaScript
React学习笔记
**React 是一个用于构建用户界面的 JAVASCRIPT 库。React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。** !