首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

干货 | 携程租车React Native单元测试实践

本篇即是ReactReact Native项目单元测试的完整方案介绍。...一、技术选型: Jest + Enzyme + react-hooks-testing-library 1.1 jest Jest是FaceBook出品的前端测试框架,适合用于ReactReact...快照将在测试文件的当前文件路径自动生成的snapshots文件夹中保存。当主动修改造成ui变化时,使用jest -u来更新快照。..._onClear).toBeCalled();//测试组件实例上的方法是否被调用 九、Redux测试 使用React或者React Native通常会使用Redux进行状态的管理,需要mock store...单元测试 React Native v0.59版本以后,RN也支持了React Hooks的开发,由于Enzyme对于Hooks测试支持不理想,我们专门引入了react-hooks-testing-library

6K30

2020 年你应该知道的 React

hooks 来管理局部状态: useState、 useReducer useContext。...所有 React 的内置 hooks 都非常适合本地状态管理。当涉及到远程数据的状态管理,如果远程数据带有 GraphQL 端点,我建议使用 Apollo Client。...当使用这样的类型检查器,您可以开发期间获得错误。您不必启动应用程序就可以找到本可以通过这种类型检查防止的 bug。这样一来,类型检查器就可以提高您的开发人员体验,避免首先引入 bug。...至少,您可以使用 React-test-renderer Jest 测试中渲染 React 组件。这已经足以用 jest 来执行所谓的快照测试了。...最终,您会发现自己使用 Enzyme 或 React Testing Library (这两个都在 Jest 测试环境中使用)来进行更详细的测试功能集。

14.4K40
您找到你想要的搜索结果了吗?
是的
没有找到

JavaScript 测试系列实战(三):使用 Mock 模拟模块并处理组件交互

在编写测试,外部 API 可能由于各种原因而失败。我们希望我们的测试是可靠独立的,而最常见的解决方案就是 Mock。...打开 TodoList 的测试文件,首先在最前面通过 jest.mock 配置 axios 模块的 Mock(确保要在 import TodoList 之前), Mock 之后,无论测试还是组件中使用的都将是...我们将测试状态是否随着我们的新任务而更新,其中比较有趣的是请求是异步的,我们继续修改代码如下: import React from 'react'; import { shallow } from 'enzyme...本文中,我们研究了如何使用 react-hooks-testing-library[2] 处理它。...这就是我们使用 react-hooks-testing-library[4] 的原因,我们将在下一篇教程里讲解如何更加舒适的测试 React Hooks 的方法,敬请期待!

4.7K20

【送红宝书】JavaScript 测试系列实战(四):掌握 React Hooks 测试技巧

「为了回馈图雀社区的读者,图雀酱特地挑选了几本书籍送给大家,文末有送书活动详情哦~」 React Hooks 作为复用共同业务逻辑的强大工具,已经开源库业务代码中得到了广泛的使用。...之前 useModalManagement 钩子的测试代码中,我们仅仅只测试了调用 Hook 不会报错。...这个函数调用后会返回 Promise,这个 Promise 在下次渲染 Hook 进入 Resolve 状态,非常适合用来测试异步更新的逻辑。...注意 在编写 Jest 异步测试用例,如果涉及到 Promise 的使用(包括 async/await ),要确保 return 一个值,否则测试会超时。详细介绍请参考 Jest 异步测试文档。...至于怎么用 Mock 来写,就留给作业给你吧~ 测试 Redux + Hooks 规模较大的应用中,我们通常会使用一个状态管理库来解决复杂的数据流问题,而最受欢迎的选择无疑是 Redux。

2.1K00

React Hook测试指南

Jest Jest是Facebook开源的一个单元测试框架,它的使用知名度都非常高,一些著名的开源项目例如webpack, babelreact等都是使用Jest来进行单元测试的,由于这篇文章的重点不是...act 这函数React自带的test-utils的act函数(https://reactjs.org/docs/test-utils.html#act)是同一个函数,我们知道组件状态更新的时候(setState...),组件需要被重新渲染,而这个重渲染是需要React进行调度的,因此是个异步的过程,我们可以通过使用act函数将所有会更新到组件状态的操作封装在它的callback里面来保证act函数执行完之后我们定义的组件已经完成了重新渲染...yarn add -D react-test-renderer@^16.9.0 例子 现在就让我们看一个简单的同时使用Jestreact-hooks-testing-library来测试hook的例子...总结 本篇文章中我给大家介绍了什么叫做单元测试,为什么我们需要在自己的项目里面引入单元测试以及教大家如何使用Jestreact-hooks-testing-library来测试我们自定义的hook。

1.7K10

单元测试

@testing-library/react-hooks 是一个用于测试 React Hooks 的工具库。它提供了一组用于编写可靠可维护的测试的实用函数工具。...这样可以确保每个测试用例都在相同的初始状态下运行,并且没有残留的状态或影响。 每个测试用例之后使用 afterEach 函数或 afterAll 函数来清理测试环境。...这样可以确保每个测试用例完成后,不会留下任何对后续测试用例有影响的状态。 确保每个测试用例中,等待异步操作完成后再进行断言。...act } from '@testing-library/react'; act 是一个用于处理 React 组件的异步更新和副作用的工具函数,它的主要作用是确保测试中正确地触发等待组件更新。...act 的使用场景如下: 当你测试中进行与 React 组件的交互(例如模拟用户点击、输入等),可以使用 act 来确保组件更新后进行正确的断言。

17710

如何自动化测试 React Native 项目 (下篇) - 单元测试

接着上篇的内容, 这篇文章会详细的介绍 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的更新

3.2K21

2021年React学习路线图

图片 React Bootstrap 主页被分割成多个组件 每个组件有一套生命周期,动态数据保存在状态中。当状态中的数据发生改变,组件会再次渲染,来更新这些变更。你要理解这几个基础概念。...React Hook 是 React 16.8 引入的新特性。它用在函数组件中,允许开发者不使用类的情况下,使用状态其他特性。 之前,函数组件是无状态的,状态生命周期用在类组件中。...有了 Hooks,开发者可以函数组件中使用状态。 你应该知道如何使用最常见的 Hooks,比如 setState useEffect。...(我在工作中大量使用这个库) 2.7 小结 create-react-app React 基础: 组件, 属性, 生命周期状态 React Hooks React Router React Query...编写测试很重要,根据我的经验,通常比编写实际代码更难。 您应该学习最流行的测试库,如 Jest Enzyme,以及如何使用库(如 Sinon )模拟 API 调用。

7.5K21

2022 年的 React 生态

React 带有两个内置的 Hooks 来管理本地状态:useState useReducer。...的内置 Hooks 非常适合 UI 状态管理,但当涉及到远程数据的状态管理(也包括数据获取),我建议使用一个专门的数据获取库,例如 React Query,它自带内置的状态管理功能。...你可以使用 react-test-renderer 在你的 Jest 测试中渲染 React 组件。...当你某个时间点再次运行测试,将创建另一个快照,这个快照会前一个快照进行 diff。如果存在差异,Jest 将发出警告,你要么接受这个快照,要么更改一下组件的实现。...最近 React Testing Library (RTL) 也比较流行( Jest 测试环境中使用),它可以为 React 提供更精细的测试

5.7K20

Sentry 开发者贡献指南 - 前端(ReactJS生态)

React 定义 React 组件 新组件需要访问 this 使用 class 语法,以及类字段+箭头函数方法定义。...当您需要创建新的共享状态,请考虑使用 context useContext 而不是 Reflux。此外,可以利用虫洞状态管理模式来公开共享状态突变函数。...使用 React Testing Library 我们正在将我们的测试从 Enzyme 转换为 React Testing Library。本指南中,您将找到遵循最佳实践避免常见陷阱的技巧。...查询 尽可能使用 getBy... 仅在检查不存在使用 queryBy... 仅当期望元素可能不会立即发生的 DOM 更改后出现时才使用 await findBy......label 文本查找表单元素,因此测试表单首选此选项。

6.9K30

“别更新了,学不动了” 之:全栈开发者 2019 应该学些什么?

今年我们看到了 React 16 的大量更新和 2019 年即将发布的一些小版本更新。...这意味着你需要知道如何使用 React.lazy() 进行代码拆分,使用 React.memo 进行优化,并时刻关注新功能,如 React Hooks,它可能会给...Jest 视为一体化的测试框架,就不需要像第二个选项那样添加其他工具库。...如果你想要简单些,只需使用 Jest。如果你想要更多可定制性模块化,请选择 Mocha。 如果你还了解这些,那是锦上添花:Mock、Spy、存根快照测试。...Ionic NativeScript 的使用将在 2019 年逐渐减少,除非你正在使用 Angular,否则你不应该关注它们。 所以, 2019 年,请继续关注 React Native

2.5K30

前端单元测试Jest

概述 关于前端单元测试的好处自不必说,基础的介绍知识可以参考之前的博客链接:React Native单元测试软件的测试领域,测试主要分为:单元测试、集成测试功能测试。...; 沙箱快速:Jest虚拟化了JavaScript的环境,能模拟浏览器,并且并行执行; 快照测试Jest能够对React 树进行快照或别的序列化数值快速编写测试,提供快速更新的用户体验; 支持异步代码测试...,并且开发测试期间使用,用于判断某些逻辑条件下会执行某种预期的结果。...] = ` 我是react组件 `; 如果被测试代码有正常更新,可以使用jest --updateSnapshot ”命令重新更新缓存文件。...附: 实例源码 参考: React Native单元测试 Jest测试官方文档

2.7K20

Fast Refresh 原理剖析

Refresh 期间的语法错误会被 catch 住,修掉并保存文件即可恢复正常,所以存在语法错误的文件不会被执行,无需手动重刷 运行时错误:模块初始化过程中的运行时报错同样能被 catch 住,不会造成实质影响...三.实现原理 要想达到比HMR(module 级)、React Hot Loader(受限的组件级)粒度更细的热更新能力,支持组件级、甚至 Hooks 级的可靠更新,仅靠外部机制(补充的运行时、编译转换...、Hooks 的热替换提供了原生支持 四.源码简析 相关源码分为 Babel 插件 Runtime 两部分,都维护react-refresh中,通过不同的入口文件(react-refresh/babel...| null): void => { if (__DEV__) { resolveFamily = handler; } }; performReactRefresh从 Runtime...以上只是具备了运行时细粒度热更新的能力,要着整运转起来还要与 HMR 接上,这部分工作与具体构建工具(webpack 等)有关 具体如下: // 1.应用入口(引react-dom之前)引入runtime

4.1K10

「首席架构师推荐」React生态系统大集合

挑战 ReactCheatsheet React模式 使用React设置流程 React钩子 React钩子 用React HooksContext替换Redux React Hooks备忘单:解锁常见问题的解决方案...如何使用React Hooks获取数据?...对交互式命令行应用程序进行React react-blessed - 用于祝福终端接口库的React渲染器 React测试 jest - 令人愉快的JavaScript测试框架 enzyme - 针对...创建React Native App - 没有构建配置的任何操作系统上创建React Native应用程序,包含或不包含Expo Snowflake - 使用Redux,Parse.com,Jest(...Schema验证redux状态对象类型 redux-persist - 坚持并补充redux商店 Redux教程 ES6中使用ReactRedux构建应用程序 Redux入门 使用惯用Redux

12.3K30

前端测试体系建设与最佳实践总结

因为我们的项目使用的是 React 技术栈,这里主要介绍 React 项目的技术选型使用。 单元测试 ? Mocha 是生态最好,使用最广泛的单测框架,但是他需要较多的配置来实现它的高扩展性。...Augular 的默认测试框架就是 Karma + Jasmine,而 React 的默认测试框架是 Jest. Jest 被各种 React 应用推荐使用。...React Testing Library 出的比较晚,但倾向于支持 React 的新功能,这对我来说测试 Hooks 是一个巨大的好处。...,测试 Toast 弹窗内的内容是否一致,beforeClose 事件是否是弹窗关闭才触发。...原有逻辑增加新功能,通过运行之前的测试,能够大大提高迭代的质量稳定性。 这篇文章主要总结了笔者 React 项目中书写测试的经验与沉淀,而对于 Vue 的项目,暂时还没有深入研究。

5.3K30

React Native自动化测试

React Native的官方代码仓库里有一些测试代码,你可以贡献代码之后回归测试一下,以检测有没有引起别的问题。...我们期待你能帮助我们提高测试覆盖率,以及提供更多的测试代码或是测试用例。 使用Jest测试 Jest命令行通过node来执行的纯js测试工具。测试代码放置__tests__目录下。...你可以react-native源代码的根目录中使用如下命令来运行现有的jest测试代码: npm test 我们建议你贡献代码的时候也添加自己的测试代码。...单元测试 (Android) React Native使用Buck编译工具来运行测试。 单元测试部分直接在本地运行,不需要模拟器。...参考效果图是通过RCTTestRunner中设置recordMode = YES,然后在运行测试录制的。

3K60

React Native 的未来与React Hooks

近期一些朋友聊到了 React-Native 的官方重构状态,而刚好近期发布的 0.59.x 系列版本中,上层设计出现了比较大的调整,结合体验之后的状态,就想聊聊 React-Native 的现状、...同样携程的项目中: 《携程开源RN开发框架CRN》 文章也表示第一更新到了 0.59.x 版本,现在还会觉得 React-Native “要凉” 了嘛?...modal 插件使用了 BackAndroid ,虽然作者也更新了插件做兼容,但是···· 更新了插件之后,重新运行后却依旧报错?...而对于 React Hooks 能在这么早就引入到 React-Native 中,给我的感觉就是 Facebook 团队致力于模糊 React 开发者 Web App 之间的边界,同时这也是为了丰富...Hooks ,结合查阅源码和文章简单理解,就在渲染之前利用系列的钩子,而 Hooks 内部利用了数组 ,实现状态数据的顺序更新

3.7K30

记录第一次给开源项目提 PR

本文是深入浅出 ahooks 源码系列文章的第八篇,这个系列的目标主要有以下几点: 加深对 React hooks 的理解。 学习如何抽象自定义 hooks。...起因 写了几篇关于 ahooks 的文章之后,收到了官方同学的私信。 这让我受宠若惊的同时也有点小兴奋惶恐。 兴奋是,之前感觉参与开源是一件遥不可及的事情,现在似乎我也能够去做了。...上述整体的改造并不困难,但是我测试用例的时候,就开始踩坑了,因为我很少书写前端的测试用例,还是针对于 hooks测试用例。...第五次执行的时候,就不会执行 errorCallback,也就还是 4 次。然后我们手动 run 一次请求,期待 errorCallback 应该执行 5 次。...系列文章: 大家都能看得懂的源码(一)ahooks 整体架构篇[4] 如何使用插件化机制优雅的封装你的请求hook [5] ahooks 是怎么解决 React 的闭包问题的?

59811
领券