本篇教程是 JavaScript 测试系列实战 的第一篇教程，首先介绍了测试的类型，然后主要通过一个 React 项目教会你如何使用 Jest 编写第一个测试，然后使用 Enzyme 对 React 组件进行浅层渲染...因此这里建议直接使用 npx jest 执行测试。 编写第一组测试 每个测试文件通常有多个测试用例。Jest 允许我们通过 describe 函数对测试用例进行分组，它创建了一个可以组合多个测试的块。...Jest 测试文件中使用它。...配置 jest-enzyme 你应该还记得，在刚才的测试代码中，我们还是使用了 Jest 自带的 Matcher（toEqual）。...我们将在下一篇教程中讲解如何去更“深层”地去测试我们的组件。
安装Redux库 让我们使用以下命令安装reduxandreact-redux库。...npm i redux react-redux redux：Redux用于管理状态 react-redux：用于在react和redux库之间进行绑定。...”库中导入了createStore函数，并从react-redux库中导入 Provider 组件。... 组件使用react context API通过组件树向下传递状态。 从组件访问Redux状态 现在我们可以直接从React组件访问我们的redux状态。...通过使用状态参数， 我们可以访问在reducer函数内部定义的redux状态。
有了 Hooks，开发者可以在函数组件中使用状态。 你应该知道如何使用最常见的 Hooks，比如 setState 和 useEffect。...一个网页需要获取数据，复杂的时候需要维护大量的状态，React 没有约定怎么获取和更新数据。状态管理很麻烦，所以有了 Redux 这样的库。 然而，Redux 很复杂，并且引入了大量的模版代码。...尽管 Redux 非常复杂，并且为最简单的数据获取引入了大量模版代码，但它仍然是业界非常流行的和广泛使用的状态管理库。...学习 React 中它是可选的，但仍然是一个好用的库。 3.2 测试 Jest - 简单的 JavaScript 测试框架。 Jest 是一个简单的 JavaScript 测试框架，它注重简单性。...编写测试很重要，根据我的经验，通常比编写实际代码更难。 您应该学习最流行的测试库，如 Jest 和 Enzyme，以及如何使用库（如 Sinon ）模拟 API 调用。
目录 React 中的状态是什么 如何使用 useState hook 如何使用 useEffect 读取状态更新 如何传递一个回调给状态更新函数 管理规模和复杂性 React context 如何使用...那么 Redux 呢 Redux 是一个已经存在很长时间并且在 React 中被广泛使用的库。...不过，作为开发者，我们必须牢记，Redux 和其他库的创建是为了解决特定的状态管理问题，特别是在真正的大型、复杂和大量使用的应用程序中。...当需要更具体、更强大的状态管理库时，我认为应该在可靠性和简单性之间做出选择。 Redux 是最成熟和使用最广泛的库，它附带大量文档、在线社区以及在每个新版本中发现和解决的以前错误。...相反，我们之前所看到的现代库要简单得多，而且直截了当，但是它们没有得到广泛使用和测试，仍然是一种实验性的。 但就我们目前所看到的而言，其中一个或一些带头成为更广泛使用的工具似乎只是时间问题。
接着上篇的内容， 这篇文章会详细的介绍在 Glow 我们如何写单元测试， 以及在 React Native 中各个模块单元测试的详细实现方式。...Jest Snapshot Test的特点： Jest 使用一个 test renderer 来生成出 React tree 的序列化结构树。...Jest 的 snapshot 测试不仅可以对比React tree结构的区别， 也可以对比其他可序列化的值的区别。 比如对比Redux某个状态的state是否和之前相同。...当 snapshot 结果需要升级更新时， 只需要执行 jest -u 指令即可更新之前生成的 snapshot 结果。 为什么 Snapshot 在 React 测试中是可靠的呢？...在 React(以及 React Native ) 的开发理念中， 开发者把重点放在描述要显示的组件在不同输入时的静态状态，然后交给React去处理UI的更新。
MVC 和 Flux 最大的不同就是查询和更新的分离。在 MVC 中，Model 同时可以被 Controller 更新并且被 View 所查询。...如何对 Redux 进行单元测试 得益于 Redux 能够将 React 应用的共享状态进行隔离，我们的代码也因此变得更加结构化且易于维护，Redux 中的 reducer、action 和 selector...组件和 Redux store 的交互 前面我们讲完了 Redux 单元测试所需要的基本知识，而 React 组件需要从 Redux store 读取状态或者是发送 action 改变 store 状态的时候...接下来就来聊聊如何用 React Test Utils 测试 React 组件中的 Redux。...推荐书籍 React 官方中文文档 – 用于构建用户界面的 JavaScript 库 React Testing Library 《深入 React 技术栈》 《深入浅出React和Redux》 《重构
「为了回馈图雀社区的读者，图雀酱特地挑选了几本书籍送给大家，文末有送书活动详情哦~」 React Hooks 作为复用共同业务逻辑的强大工具，已经在开源库和业务代码中得到了广泛的使用。...在这篇文章中，我们将体验强大的 react-hooks-testing-library，学习如何去测试钩子的同步和异步逻辑，并最终通过一个完整的例子去了解如何结合 Redux 框架进行测试。...这个函数调用后会返回 Promise，这个 Promise 在下次渲染 Hook 时进入 Resolve 状态，非常适合用来测试异步更新的逻辑。...至于怎么用 Mock 来写，就留给作业给你吧~ 测试 Redux + Hooks 在规模较大的应用中，我们通常会使用一个状态管理库来解决复杂的数据流问题，而最受欢迎的选择无疑是 Redux。...react-redux 提供的 useSelector 和 useDispatch 钩子来分别获取状态和派发函数。
最终，一个明显的赢家出现了，那就是Redux。Redux结合了Flux、Command pattern和Elm体系结构的思想，是目前开发人员与React一起使用的事实上的状态管理库。...视图和状态的结合 虽然Redux不一定要与React一起使用，但强烈推荐使用Redux，因为它们彼此配合得很好。...Jest可以保存React组件和Redux状态生成的输出，并将其保存为序列化文件，这样您就不必自己手动生成预期的输出。Jest还具有内置的模拟、断言和测试覆盖率。一个图书馆来统治他们所有人!...Jest和酶使编写前端测试变得有趣和容易。因为定义了明确的职责和接口，所以React组件和Redux操作/缩减器相对容易测试也很有帮助。...对于React组件，我们可以测试给定一些道具，呈现所需的DOM，并在某些模拟用户交互时触发回调。对于Redux还原器，我们可以测试给定的一个先验状态和一个动作，会产生一个结果状态。
单元测试：是指对软件中的最小可测试单元进行检查和验证，通常指的是独立测试单个函数。 UI 测试：是对图形交互界面的测试。 集成测试：就是测试应用中不同模块如何集成，如何一起工作，这和它的名字一致。...因为我们的项目使用的是 React 技术栈，这里主要介绍 React 项目的技术选型和使用。 单元测试 ? Mocha 是生态最好，使用最广泛的单测框架，但是他需要较多的配置来实现它的高扩展性。...Augular 的默认测试框架就是 Karma + Jasmine，而 React 的默认测试框架是 Jest. Jest 被各种 React 应用推荐和使用。...e2e，并与 src 同放在根目录下 VScode 和 WebStorm 都有对应的 Jest 插件，安装后书写代码时有代码补全，debug 和自动运行等功能 如何编写测试 其实，Jest 的语法蛮简单的...connect 包裹后的高阶组件 尽管理论上 components 里面的公共组件都应该是无状态组件，但是有时候有些公用的组件写成有状态组件可能更容易被使用，开发成本更低。
React Hooks比你想象的更强大。 现在，我们将探索和开发一个自定义Hook来管理全局状态 - 比Redux更容易使用的方法，并且比Context API更高效。...第二项是一个能够更新组件状态，而且影响dom变化的函数。 ? useEffect() 类似Component组件，使用生命周期方法来管理副作用，例如componentDidMount()。...我们将 setState() 函数添加到一个监听器数组，并返回一个函数用来更新state 和 运行所有监听器函数。...现在已经有了 use-global-hook 这个npm包，您可以通过包文档中的示例了解如何使用它。但是，从现在开始，我们将专注于它是怎么实现的。 第一个版本 ? 在组件中使用它： ?...将actions与组件分开 如果您曾经使用过复杂的状态管理库，那么您就知道直接在组件中操作全局状态并不是最好的做法。 最好的方法是，通过创建操作状态的action来分离业务逻辑。
一、技术选型: Jest + Enzyme + react-hooks-testing-library 1.1 jest Jest是FaceBook出品的前端测试框架，适合用于React和React...有以下几个特点： 简单易用：易配置，自带断言库和mock库。 快照测试：能够创造一个当前组件的渲染快照，通过和上次保存的快照进行比较，如果两者不匹配说明测试失败。...1.2 Enzyme Enzyme是AirBnb开源的React测试工具库，通过一套简洁的api，可以渲染一个或多个组件，查找元素，模拟元素交互（如点击，触摸），通过和Jest相互配合可以提供完整的...快照将在测试文件的当前文件路径自动生成的snapshots文件夹中保存。当主动修改造成ui变化时，使用jest -u来更新快照。..._onClear).toBeCalled();//测试组件实例上的方法是否被调用 九、Redux测试 在使用React或者React Native时通常会使用Redux进行状态的管理，需要mock store
这种时候，就需要测试的方式，来保障我们应用的质量和稳定性了。 接下来，让我们学习下，如何给 React 应用写单元测试吧?...它只查看实现本身，也就是说，您的递增和递减方法执行之后，应用的状态是否正确。这就是代码损坏，测试也会通过。...因此，可以从DOM测试库和其他一些有用的方法(如debug、rerender或unmount)获得大量查询。...注意:这个AAA模式并不特定于测试库。事实上，它甚至是任何测试用例的一般结构。我在这里向您展示这个是因为我发现测试库如何方便地在每个部分中编写测试是一件很有趣的事情。...这里，我们创建了自己的助手函数 renderWithRedux() 来呈现组件，因为它将被多次使用。 renderWithRedux() 作为参数接收要呈现的组件、初始状态和存储。
重点将展开以下两种react组件类型测试。 展示型组件测试 展示型组件测试，意思就是要确保每一次的修改都是符合预期的，这里笔者要着重介绍下jest框架里面的snapshot功能。...shapshot就是会对组件进行一次快照记录当前的状态，每一次run jest的时候，对比上一次，看看是否有变化。...一开始我觉得单元测试很鸡肋的原因也是没有深入了解它，这次发现就算是和业务结合很紧密的组件，也能够模拟正常的操作，这里就贴一个和redux结合的组件来举例 import React from 'react...redux，axios库。...更新一个bug fix，在高阶组件下，我们需要调用wrapper.update(); 这里是issue 更新一个jest全局变量包
本文介绍如何使用Jest覆盖Web前端单元测试、如何统计测试覆盖率，Jest对比Mocha等内容。 Jest是什么？ ? Jest是一个令人愉快的 JavaScript 测试框架，专注于简洁明快。...合理的describe()分组和按功能细分test()测试对日后维护起到很关键的作用。 断言库常用接口 Jest内置Expect断言库，下面列举几个常用的断言方法就足以应付正常测试场景。...更新快照功能的坏处就是它操作太简单了，简单到让人麻痹，让人懒惰，让人容易忽略快照更新前后的差异对比，将错误的测试结果作为正确快照提交上库。...注意，如果redux状态组件测试时，要先初始化store和触发redux的事件后，再渲染React组件： test("init", () => { let store = initStore(combineReducers...状态，再渲染React组件。
Router 在正常工作后, 重构代码到使用 Redux 使用 React Testing Library 测试应用程序 React Testing Library | Testing Library...隐藏和显示组件 向组件添加状态 添加状态变量 projectBeingEdited 以保存当前正在编辑的项目。 并更新 handleEdit 以设置 projectBeingEdited 变量。...React Redux Hooks 删除页面（容器）组件的本地状态，并使用 useSelector 替换为 Redux 状态。...打开命令提示符或终端并运行以下命令，从 React 测试库后面的核心测试库中安装 user-event 。...To Use Redux Today | Redux --- 为什么 Redux 工具包是 今天如何使用 Redux | Redux Migrating to Modern Redux | Redux
这三个 Hooks 足以让你实现一个强大的状态管理系统了。 如果你发现自己过于频繁地使用 React 的 Context 来处理共享/全局状态，你一定要看看 Redux，它是现在最流行的状态管理库。...它允许你管理应用程序的全局状态，任何连接到其全局存储的 React 组件都可以读取和修改这些状态。 如果你碰巧在用 Redux，你一定也应该查看 Redux Toolkit。...虽然 React Query 本身的定位并不是一个状态管理库，它主要用于从 API 获取远程数据，但它会为你处理这些远程数据的所有状态管理(例如缓存，批量更新)。...你可以使用 react-test-renderer 在你的 Jest 测试中渲染 React 组件。...最近 React Testing Library (RTL) 也比较流行（在 Jest 测试环境中使用），它可以为 React 提供更精细的测试。
所有这些都可以在 React 中用于复杂的本地状态管理。它甚至可以模拟 Redux(Redux 是 React 的一个流行的状态管理库)。...至少，您可以使用 React-test-renderer 在 Jest 测试中渲染 React 组件。这已经足以用 jest 来执行所谓的快照测试了。...最终，您会发现自己在使用 Enzyme 或 React Testing Library (这两个都在 Jest 测试环境中使用)来进行更详细的测试功能集。...这两个库使得在 HTML 元素上呈现组件和模拟事件成为可能。然后，Jest 用于 DOM 节点上的断言。...: React Hooks 路由: 无 or React Router 身份验证: Firebase 数据库: Firebase UI 库: none 表单库: 无 测试库: Jest 实用程序库: JavaScript
确保代码没有bug的一种方法就是编写测试用例。测试React hooks与测试一般程序的方式没有太大区别。 在本教程中，我们将了解如何通过使用带有hooks的to-do应用程序来实现这一点。...我们将介绍使用Enzyme和React Testing Library编写测试，这两个库都能做到这一点。...如果你第一次使用Enzyme，我们之前发布过关于它的文章，《Enzyme如何在React应用中与Jest一起使用》。我们可以用他们来深入测试React Hooks。...根据官方文档，React取决于钩子调用的关联状态和相应的useState调用的顺序。这段代码打乱了顺序，因为钩子只有在条件为true时才会被调用。 这也适用于useEffect和其他钩子。...加油写面向对象的React代码！ React钩子和应用中的其他钩子一样容易出错，你要确保你能很好地使用它们。正如我们刚才看到的，有几种方法可以做到这一点。
in JS ·Styled Components ·Radium ·Emotion ·JSS ·Aphrodite 6.状态管理...○TypeScript ○Flow 8.表单 ○Redux Form ○Formik ○Formsy ○Final Form 9.路由 ○React-Router...○Moment ○classnames ○Numeral ○RxJS ○Ramda 12.测试 i.单元测试 ·Jest ·Enzyme...·Puppeteer ·Cucumber.js iii.集成测试 ·Karma 13.国际化 ○React Intl ○React i18next 14...之后就会打开思维导图，修改之后上传后更新 README 的 PNG 图片 (需要导出)，然后提交 PR 。 提交 PR 以帮助改进 在 issues 中进行讨论想法 帮忙宣传
尽管 Zustand 已成为社区中的主流选择，但当需要状态管理库时，Redux 仍然是市场上最受欢迎的 React 状态管理工具库。若你选择使用Redux，推荐你一并查看 Redux Toolkit。...虽然 TanStack Query 本身并不是一个专门的状态管理库，主要用于从 API 获取远程数据，但它能够处理所有与该远程数据相关的状态管理工作，包括缓存和乐观更新。...如果希望在 Redux 中集成数据获取和状态管理功能，那么可以考虑使用 RTK Query，它能够将数据获取功能与 Redux 无缝集成，简化状态管理流程。...测试 测试 React 应用的核心是使用如 Jest 这样的测试框架。Jest 提供了测试运行器、断言库以及其他实用的功能，满足全面测试框架的需求。...如果倾向于使用 Vite，Vitest 是一个值得考虑的 Jest 替代方案。 在测试框架中渲染 React 组件时，可以使用 react-test-renderer。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
