本篇教程是 JavaScript 测试系列实战 的第一篇教程，首先介绍了测试的类型，然后主要通过一个 React 项目教会你如何使用 Jest 编写第一个测试，然后使用 Enzyme 对 React 组件进行浅层渲染...E2E 测试的重点是在我们正在运行的应用程序中模拟实际用户（例如模拟滚动、单击和键入等行为），并检查我们的应用程序是否从实际用户的角度运行良好。...Jest 测试文件中使用它。...Enzyme 浅层渲染后的组件还包括其他测试方法，可参考 https://enzymejs.github.io/enzyme/docs/api/shallow.html。...配置 jest-enzyme 你应该还记得，在刚才的测试代码中，我们还是使用了 Jest 自带的 Matcher（toEqual）。
在上一篇教程中，我们已经介绍了使用 Enzyme 测试 React 组件的基本知识。...在测试与 DOM 的交互或者在处理高阶组件时，mount 函数也可以派上用场。_Mount 使用 DOM 实现的模拟，Jest 默认使用的是 jsdom。...这个快照文件包含渲染后组件的整个结构，并且应该与测试文件本身一起提交到代码库。...如果我们要更新所有失败的快照，可以使用 -u 标志(别名为 --updateSnapshot) 来运行 Jest。...- END - ● JavaScript 测试系列实战（一）：使用 Jest 和 Enzyme 测试 React 组件● 你不知道的 Npm（Node.js 进阶必备好文）● 用动画和实战打开 React
一、技术选型: Jest + Enzyme + react-hooks-testing-library 1.1 jest Jest是FaceBook出品的前端测试框架，适合用于React和React...1.2 Enzyme Enzyme是AirBnb开源的React测试工具库，通过一套简洁的api，可以渲染一个或多个组件，查找元素，模拟元素交互（如点击，触摸），通过和Jest相互配合可以提供完整的...快照将在测试文件的当前文件路径自动生成的snapshots文件夹中保存。当主动修改造成ui变化时，使用jest -u来更新快照。...七、Jest 异步测试 Jest单元测试是同步的，因此面对异步操作如fetch获取数据，需要进行异步的模拟测试。..._onClear).toBeCalled();//测试组件实例上的方法是否被调用 九、Redux测试 在使用React或者React Native时通常会使用Redux进行状态的管理，需要mock store
JavaScript测试教程–part 4：模拟 API 调用和模拟 React 组件交互 在上一篇教程中，我介绍了使用 Enzyme 测试 React 组件的基础知识。...所以上面的测试失败了，你需要了解“浅渲染”的局限性。 Mount 模拟了 DOM 的实现，而 Jest 默认使用 jsdom。...正是由于这个事实，使用 mount 函数能够测试这些组件是否可以协同工作，而不仅仅是单独的单元测试。 要弄清楚单元测试和集成测试的区别，请参见本教程第一部分。...在测试期间，将渲染组件并创建其快照。它包含渲染组件的整个结构，应该与测试本身一起提交给存储库。再次运行快照测试时，新的快照将与旧的进行比较。如果它们不同，则测试将失败。...你还可以在 watch 模式下运行 Jest，这能够允许你一个接一个地更新所有有冲突的快照。
JavaScript测试教程–part 4：模拟 API 调用和模拟 React 组件交互 今天，我们进一步测试 React 组件。它涉及模拟组件交互和模拟 API 调用。你将学到两种方法，开始吧！...('axios')，Jest 在的测试和组件中都用我们的模拟代替了 axios。...有关其功能的完整列表，请阅读文档。我们的测试检查组件在渲染和运行之后是否从模拟中调用 get函数，并成功执行。...为了更进一步，让我们测试一下用户单击按钮后是否从的组件发送了实际的请求。...我们将要测试状态是否能够随着的新任务而更新。有趣的是请求是异步的。
在这篇教程中，我们将学习如何测试更复杂的组件，包括用 Mock 去编写涉及外部 API 的测试，以及通过 Enzyme 来轻松模拟组件交互 初次尝试 Jest Mock 我们的应用程序通常需要从外部的...在编写测试时，外部 API 可能由于各种原因而失败。我们希望我们的测试是可靠和独立的，而最常见的解决方案就是 Mock。...更新后的快照文件反映了我们刚刚做的变化： // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ToDoList component when provided...我们将测试状态是否随着我们的新任务而更新，其中比较有趣的是请求是异步的，我们继续修改代码如下： import React from 'react'; import { shallow } from 'enzyme...由于没有发起实际的 post 请求，我们的测试可以更可靠，更快。除此之外，我们还在整个 React 组件中模拟了事件。我们检查了它是否产生了预期的结果，例如组件的请求或状态变化。
技术方案 针对项目本身使用的是React + Dva + Antd的技术栈，单元测试我们用的是Jest + Enzyme结合的方式。...Jest特点： 零配置 快照 隔离 优秀的 api 快速且安全 代码覆盖率 轻松模拟 优秀的报错信息 Enzyme Enzyme是Airbnb开源的React测试工具库，提供了一套简洁强大的API，并内置...如果React的版本是15或者16，需要安装对应的enzyme-adapter-react-15和enzyme-adapter-react-16并配置。...如果代码中使用了Promise，则可以通过返回Promise来处理异步代码，jest会等该promise的状态转为resolve时才会结束，如果promise被reject了，则该测试用例不通过。...这个快照文件包含渲染后组件的整个结构，并且应该与测试文件本身一起提交到代码库。
单元测试工具 - Jest & Enzyme Jest - Facebook Jest 是 Facebook 开源的 Javascript 测试框架，提供了许多好用的 API，先介绍下主要的优点: 自带...Jest Snapshot Test的特点： Jest 使用一个 test renderer 来生成出 React tree 的序列化结构树。...Jest 的 snapshot 测试不仅可以对比React tree结构的区别， 也可以对比其他可序列化的值的区别。 比如对比Redux某个状态的state是否和之前相同。...在交互测试中，我们主要利用 simulate() API模拟事件，来判断这个元素的 prop 上的特定函数是否被调用， 传参是否正确， 以及组件状态是否发生意料之中的修改。...在最近的 enzyme 版本更新后， shallowWrapper 的 component lifecycle 函数也会被正确的调用。因此对组件状态的测试是比较容易的。
，关于不同测试框架的重点，这篇文章就不详细展开了，最终结合我们的项目，最终采用了facebook的jest+enzyme。...shapshot就是会对组件进行一次快照记录当前的状态，每一次run jest的时候，对比上一次，看看是否有变化。...但是仔细想想，这其实就违背了我们单元测试的初衷，笔者这里也大胆猜测下，jest官方在实现这个功能的时候，应该也只是想记录下一步一步的事件后，当前组件的html结构，对比上一次的快照，来看功能是否符合预期...一开始我觉得单元测试很鸡肋的原因也是没有深入了解它，这次发现就算是和业务结合很紧密的组件，也能够模拟正常的操作，这里就贴一个和redux结合的组件来举例 import React from 'react...那其实整个流程就是初始化这个组件，看看渲染的html结构是否符合预期，然后点击下拉框，选中其中第一个，发起请求，拉回详细数据，再观察组件是否展示正常,编写完测试用例后，就已经用代码模拟了整个手工操作，怎么样
JavaScript测试教程–part 4：模拟 API 调用和模拟 React 组件交互 在本教程的第一篇中，我们简要介绍了单元测试的基础。这次要更进一步，使用 Enzyme 库测试 React。...这样可以使你的程序将更加可靠，并且更加容易避免回归。我们在这里用了 Jest，不过 Enzyme 也可以与 Mocha 和 Chai 之类的库一起使用。...这里要注意一个非常重要的点：即使我们用了 Enzyme，但测试运行程序仍然是 Jest。由于我们用的是 expect 函数，因此可以使用各种可供调用的匹配器函数。我已经在课程的第一部分中提到了它们。...要将其与 Jest 一起使用，请安装 jest-enzyme 包。 1npm install jest-enzyme 最后要做的是将其导入 setupTests 文件中。...在编写单元测试时，它工作得很好。在本教程的后续部分中，我将介绍其他类型的渲染，并学习如何测试程序的不同部分。它将包括快照测试和模拟数据之类的技术。下次见！
它只查看实现本身，也就是说，您的递增和递减方法执行之后，应用的状态是否正确。这就是代码损坏，测试也会通过。...这里，我们创建了自己的助手函数 renderWithRedux() 来呈现组件，因为它将被多次使用。 renderWithRedux() 作为参数接收要呈现的组件、初始状态和存储。...测试计数器的增减是否正确: 为了测试递增和递减事件，我们将初始状态作为第二个参数传递给renderWithRedux()。现在，我们可以单击按钮并测试预期的结果是否符合条件。...为此，我们必须在jest.mock('axios')的帮助下模拟axios请求。 现在，我们可以使用axiosMock并对其应用get()方法。...最后，我们将使用Jest函数mockResolvedValueOnce()来传递模拟数据作为参数。 现在，对于第二个测试，我们可以单击按钮来获取数据并使用async/await来解析它。
Jest 是一款轻量的 JavaScript 测试框架，它的卖点是简单好用，由 facebook 出品。本文就简单讲讲如何使用 Jest 对 React 组件进行测试。 为什么需要单元测试？...单元测试（Unit Testing），指的是对程序中的模块（最小单位）进行检查和验证。比如一个函数、一个类、一个组件，它们都是模块。 使用单元测试的优点： 更好地交付高质量代码。...Jest 基本使用 我们先写一个简单的函数，作为被测试的模块。...React Testing Library 是 以用户为角度 的测试库，能够模拟浏览器的 DOM，将 React 组件挂载上去后，我们使用其提供的一些模拟用户操作的 API 进行测试。...官方只支持到 React 16，Enzyme 已死： https://dev.to/wojtekmaj/enzyme-is-dead-now-what-ekl 使用 Jest 测试 React 组件
() 作用： 把遇到的计时器挂起，在必要时，再使用jest.runOnlyPendingTimers执行掉已经挂起的计时器 这里使用jest.useFakeTimers()的目的就是暂停正在执行的timer...测试用例 import React from 'react'; //enzyme库用来判断、操纵和遍历 ReactComponents import {mount} from 'enzyme'; import...=> { // mount()借助jsdom模拟浏览器环境，并提供DOM api和生命周期的支持，方便测试HOC（高阶组件） // shallow()浅渲染，将组件渲染成虚拟DOM对象，...enzyme.mount()生成完整的React组件 ② mount()/shallow()/render()的区别如下： [1] mount()借助jsdom模拟浏览器环境，并提供DOM api和生命周期的支持.../docs/api/mount.html 通过本文，你应该知道 ① jest.useFakeTimers()的作用及何时使用 ② 如何测试function ③ 如何测试ReactComponent ④
如果你想随时整理重构代码，那么你需要写单元测试； 如果你想有自动化的测试套件来帮你快速验证提交的完整性，那么你需要写单元测试。 这个结论对我们写不写单元测试有什么影响呢？...MVC 和 Flux 最大的不同就是查询和更新的分离。在 MVC 中，Model 同时可以被 Controller 更新并且被 View 所查询。...如何对 Redux 进行单元测试 得益于 Redux 能够将 React 应用的共享状态进行隔离，我们的代码也因此变得更加结构化且易于维护，Redux 中的 reducer、action 和 selector...}); React 组件和 Redux store 的交互 前面我们讲完了 Redux 单元测试所需要的基本知识，而 React 组件需要从 Redux store 读取状态或者是发送 action...然后我们就可以使用 Jest 模拟一个 action 的行为再传给 store，而 actionClick 这个伪造函数能够让我们去断言该 action 是否被调用过。
测试UI组件 4.1 写测试用例的原因 找到bug 新修改没有改变已有的接口和功能 将测试用例作为文档 4.2 测试结构 使用storyshots插件来实现，其核心是使用Jest，原理是每次生成一份DOM...4.3 测试交互 storybook交互性测试可以使用 Enzyme来模拟用户输入，然后使用Mocha or Jest来进行结果测试，storybook又一个专门的插件帮助我们集成他们：specifications...通过断言来测试UI组件的属性，更多使用方法可以参考specifications插件的使用。...4.4 测试样式 样式测试这里采用Puppeteer 和Jest来实现，其原理是利用Puppeteer的无头的chrome浏览器和storybook的url绑定组件特点，来渲染不同的UI组件，再进行图片快照的对比...PS：测试不通过时，运行npm run jest:integration将强制更新原有快照。
因此在这一篇文章里， 我们将介绍基于下面的几个框架来搭建持续集成： React Native 与持续集成服务器 Travis CI 的使用 单元测试 Jest 及 UI 测试框架 React Test...由 Airbnb 推出的单元测试工具，主要用来测试一些行为 运行完测试后，会向 Coveralls 提交测试覆盖率，还会获得一份 Code Climate 的『代码质量分析』分数（4.0 是满分~~）...配置 Android 环境的时候，会遇到 LICENSE 没有输入 Y 的问题，可以见 before_deploy 字段 单元测试：Jest + Enzyme 对于测试来说，尽管框架上发生了一些变化，...，就需要配置 enzyme 来使用： it('test click book', () => { const spy = jest.spyOn(SkillDetailView, 'openPage...enzyme，模拟用户的操作，并做一些断言。
因为我们的项目使用的是 React 技术栈，这里主要介绍 React 项目的技术选型和使用。 单元测试 ? Mocha 是生态最好，使用最广泛的单测框架，但是他需要较多的配置来实现它的高扩展性。...Augular 的默认测试框架就是 Karma + Jasmine，而 React 的默认测试框架是 Jest. Jest 被各种 React 应用推荐和使用。...e2e，并与 src 同放在根目录下 VScode 和 WebStorm 都有对应的 Jest 插件，安装后书写代码时有代码补全，debug 和自动运行等功能 如何编写测试 其实，Jest 的语法蛮简单的...connect 包裹后的高阶组件 尽管理论上 components 里面的公共组件都应该是无状态组件，但是有时候有些公用的组件写成有状态组件可能更容易被使用，开发成本更低。...只有单元测试和 UI 测试会计算到测试覆盖率，而 e2e 不会被计算进去。e2e 不需要写太多，因为大部分关键逻辑已经被单元测试覆盖，e2e 只需要简单的进行主流程的模拟。
技术选型 为了解决上面的问题，我们自然就会想到，其实我们需要一个自动化测试，我们在项目中的选型是这样的： Jest: Jest是一个令人愉快的 JavaScript 测试框架，专注于简单性。...enzyme: Enzyme 是 React 的 JavaScript 测试实用程序，可以更轻松地测试 React Components 的输出。...把这个 __snapshots__ 的文件夹提交到你的代码仓库，如果组件有更新的时候，只需要跑 test 命令的时候带上-updateSnapshot 选项即可。...3、模拟事件的触发来测试组件 通过 snapshot 测试和 props 测试，已经能确保组件是可以正常渲染的了，但是这还远远不够，因为有很多分支代码我们是没有覆盖到的，如果你查看 jest --coverage...首先先测试当前 state 的表现是否正常 然后通过模拟事件 ➡️触发组件内的 state 发生变化 ➡️检查 state 变化后是否正常渲染出期待的内容。
我们将介绍使用Enzyme和React Testing Library编写测试，这两个库都能做到这一点。...如果你第一次使用Enzyme，我们之前发布过关于它的文章，《Enzyme如何在React应用中与Jest一起使用》。我们可以用他们来深入测试React Hooks。...我们使用断言，在进一步模拟单击事件之前，输入“修复失败测试”，该事件应该将新的项目添加到待办事项列表中。 最后，断言列表中有三个项，并且第三个项与我们创建的项相等。...为了模拟添加新待办项的单击事件，我们使用fireEvent.click()方法并传入getByText()方法，该方法返回的是文本与我们传的参数匹配的节点。...根据官方文档，React取决于钩子调用的关联状态和相应的useState调用的顺序。这段代码打乱了顺序，因为钩子只有在条件为true时才会被调用。 这也适用于useEffect和其他钩子。
同时，我们将在 TDD 中使用 Jest 和 Enzyme 。...一旦完成本教程，你将能够： 基于需求创建 epic 和 user stories（用户故事） 基于用户故事创建测试 使用 TDD 开发一个 React 应用 使用 Enzyme 和 Jest 测试 React...应用 使用/复用 CSS variables 实现响应式设计 创建一个根据所提供的 props 实现不同渲染和功能的可复用 React 组件 使用 React PropTypes 实现组件 props...现在，将 Jest 和 Enzyme 加入依赖： $ npm i -D enzyme $ npm i -D react-test-renderer enzyme-adapter-react-16 同时...下一步，添加更多的测试用例以检查每个方法被调用后组件的状态： it('点击 Start 按钮后状态 isOn 应变为 true', () => { container.instance().forceUpdate
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
