react-testing-library中的fireevent问题 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

如何测试 React Hooks ？

对于即将来临的 React Hooks 特性，我听到最常见的问题都是关于测试的。...因为我们的测试用例规避了关于实现的细节，所以 hooks 也没问题！...这招被认为是最好的解决之道，因为操作实际上就是异步的，可从功效学的角度并不尽善尽美 -- 因为当前在 jsdom（工作在浏览器中）中这样尝试的话实际上是有 bug 的。.../cleanup-after-each' -import {render, fireEvent} from 'react-testing-library' +import {render, fireEvent...import {render, fireEvent} from 'react-testing-library' import Counter from '..

2K1 0

React 现代化测试

测试的动机测试用例的书写是一个风险驱动的行为, 每当收到 Bug 报告时, 先写一个单元测试来暴露这个 Bug, 在日后的代码提交中, 若该测试用例是通过的, 开发者就能更为自信地确保程序不会再次出现此...(代表库: eslint、flow、TypeScript) 单元测试: 在奖杯模型中, 单元测试的职责是对一些边界情况或者特定的算法进行测试。...(代表库: jest、react-testing-library) e2e 测试: 模拟用户在真实环境上操作行为(包括网络请求、获取数据库数据等)的测试。...测试组件的具体细节会带来的两个问题: 测试用例对代码错误否定; 测试用例对代码错误肯定; 以轮播图组件为例, 依次来看上述问题。...相较于 enzyme, react-testing-library 所提供的 api 更加贴近用户的使用行为, 使用其对上述测试用例进行重构: import { render, fireEvent }

1.2K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

企业级 React 项目的高级测试设置

虽然Enzyme是一个不错的库，但是react-testing-library是测试React组件的更好选择。React团队也推荐使用它。...而react-testing-library是测试任何现代React应用程序的推荐方式。...虽然react-testing-library使根据组件的行为轻松直观地进行测试变得很容易，但有时设置要测试的组件可能会变得复杂。...接下来我们看看如何解决不同的场景下的问题场景1：测试Redux连接的组件测试仅由props控制的纯组件很容易。但往往情况并非如此。...我们可以使用相同的概念来缓解此问题，并用ThemeProvider包装根组件。为了缓解这个问题，让我们调整renderConnected函数，将组件包装在ThemeProvider中。

1.3K0 0

用Jest来给React完成一次妙不可言的~单元测试

但是，互联网时代也急剧地改变了许多软件设计，开发和发布的方式。开发者面临的问题是，需求越来越多，应用越来越复杂，时不时会有一种失控的的感觉，并在心中大喊一句：“我太南了！”。...本篇文章主要围绕着React组件单元测试展开的，其目的是为了让开发人员可以站在使用者的角度考虑问题。通过测试的手段，确保组件的每一个功能都可以正常的运行，关注质量，而不是让用户来帮你测试。...除非合并，否则将覆盖DOM测试库中的默认设置。基本上，这个函数所做的就是使用ReactDOM呈现组件。在直接附加到document.body的新创建的div中呈现(或为服务器端呈现提供水合物)。...触发事件通常会触发应用程序中的一些更改，因此我们必须执行一些断言来确保这些更改发生。在我们的测试中，这样做的一个好方法是确保呈现给用户的计数已经更改。...事实上，它甚至是任何测试用例的一般结构。我在这里向您展示这个是因为我发现测试库如何方便地在每个部分中编写测试是一件很有趣的事情。

16.6K3 3

React 16.8发布了

hooks 的最佳实践，它很快会被包含在 Create React App 中。...测试 hooks 我们在这个版本中添加了一个叫作 ReactTestUtils.act() 的 API，它可以确保测试中的行为与在浏览器中的行为更加接近。...我们建议将渲染和触发组件更新的代码包装到 act() 调用中。...测试库也可以用它来包装它们的 API（例如，react-testing-library 的 render 和 fireEvent 就是这样做的）。...为了减少样板代码，我们建议使用 react-testing-library（https://git.io/react-testing-library），你可以像最终用户使用组件那样对组件进行测试。

2.6K1 0

前端反卷计划-组件库-04-Button组件开发

这也是前端反卷计划中的一项。在接下来的日子，我会持续分享前端反卷计划中的每个知识点。以下是前端反卷计划的内容：目前这些内容持续更新到了我的学习文档中。感兴趣的欢迎一起学习！...: string;}// ButtonHTMLAttributes 是 React 中的一个内置泛型类型，它用于表示 HTML 按钮元素 () 上可以接受的属性。...// AnchorHTMLAttributes 是 React 中的一个内置泛型类型，它用于表示 HTML 锚点元素 () 上可以接受的属性。...比如上面代码中的@include button-size 函数，这个是scss的一个特性，可以从官网上看下介绍。...学习文档中。

7451 0

React v16.8: The One With Hooks

下一步是什么 {#whats-next} 我们在最近发布的 React Roadmap 中描述了下个月的计划。请注意，React Hook 尚未涵盖 class 的所有用例，但它们非常接近。...测试 Hook {#testing-hooks} 我们在此版本中添加了一个名为 ReactTestUtils.act() 的新API。它可以确保你测试中的行为与浏览器中的行为更接近。...我们建议将所有代码渲染和触发对组件的更新，包装到 act() 调用中。...测试库也可以使用它包装 API（例如，react-testing-library 的 render 和 fireEvent 工具来执行此操作）。...为了减少样板代码，我们建议使用 react-testing-library，它旨在鼓励编写像最终用户那样使用组件的测试。

1.2K0 0

【译】使用Enzyme和React Testing Library测试React Hooks

确保代码没有bug的一种方法就是编写测试用例。测试React hooks与测试一般程序的方式没有太大区别。在本教程中，我们将了解如何通过使用带有hooks的to-do应用程序来实现这一点。...让我们想一下创建一个新的待办事项的过程： 1、用户在input中输入一个值。...使用react-testing-library测试我们将为此写三个测试： 1、初始待办事项的渲染 2、我们可以加一个新的待办事项 3、我们可以删除一个待办事项首先，我们安装需要的安装包： npm install...为了模拟添加新待办项的单击事件，我们使用fireEvent.click()方法并传入getByText()方法，该方法返回的是文本与我们传的参数匹配的节点。...加油写面向对象的React代码！ React钩子和应用中的其他钩子一样容易出错，你要确保你能很好地使用它们。正如我们刚才看到的，有几种方法可以做到这一点。

5K3 0

21个让React 开发更高效更有趣的工具

猴子补丁主要有以下几个用处：在运行时替换方法、属性等在不修改第三方代码的情况下增加原来不支持的功能在运行时为内存中的对象增加patch而不是在磁盘的源代码中增加这非常有用，不仅可以指导咱们修复项目的性能...Guppy 启动后的的样子 7. react-testing-library react-testing-library 是一个很棒的测试库，编写单元测试时，它会让你感觉很好。...使用此工具，您可以将鼠标悬停在节点上，这些节点是指向与树中组件直接相关的组件的链接。...如果在查看结果时遇到问题，可以在地址栏中输入chrome:extensions ，查找“React Sight”框，然后单击“Allow access to file URLs”开关，如下所示： 12....它可以帮助你在开发页面时是更容易发现一些性能问题，因为它们会使用橙色或红色对严重的重新渲染问题进行着色。 18.

3.2K3 0

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

单元测试：是指对软件中的最小可测试单元进行检查和验证，通常指的是独立测试单个函数。 UI 测试：是对图形交互界面的测试。集成测试：就是测试应用中不同模块如何集成，如何一起工作，这和它的名字一致。...UI 测试有 ReactTestUtils, Test Render, Enzyme, React-Testing-Library, Vue-Test-Utils 等。...Karma 能在真实的浏览器中测试，强大适配器，可配置其他单测框架，一般会配合 Mocha 或 Jasmine 等一起使用。每个框架都有自己的优缺点，没有最好的框架，只有最适合的框架。...UI 测试 UI 测试尽管有官方的测试框架 ReactTestUtils 和 Test Render，但是它们的 API 比较复杂，官方文档也是推荐使用 react-testing-library 或...其次覆盖到不少 QA 同学没有覆盖到的边界情况（笔者在后期补写测试的时候，顺手修了几个问题?），因为我们的测试编写原则就是要充分考虑数据的边界条件。能够方便重构。

6.2K3 0

【React】653- 22 个让 React 开发更高效更有趣的工具

以下是 Guppy 使用时的样子： 7. react-testing-library 我一直很喜欢 react-testing-library，因为在编写单元测试时感觉不错。...这个包提供了实用的 DOM 测试程序，鼓励良好的测试实践。此解决方案旨在解决测试实施细节的问题，就像用户可以看到它们一样，而不是测试 React 组件的输入/输出。...这是 react-testing-library 解决的一个问题，因为理想情况下，我们只希望我们的用户界面能够正常工作并最终正确显示。...使用此工具，我们可以将鼠标悬停在节点上，这些节点是指向树中与它们直接相关的组件的链接。...它们会用橙色/红色标出严重的重渲染问题，帮助我们在开发页面时更容易的发现一些性能问题。除非我们的目标是构建平庸的应用程序，否则为什么不试试这个在我们身边的好东西。 18.

2.8K2 0

2019年，React 开发者应该掌握的 22 种神奇工具

7. react-testing-library 我一直很喜欢 react-testing-library （https://url.leanapp.cn/AAWrJhu），因为在编写单元测试时感觉不错...这个包提供了 DOM 测试实用程序，鼓励良好的测试实践。此解决方案旨在解决测试实施细节的问题，就像用户可以看到它们一样，而不是测试 React 组件的输入/输出。...这是 react-testing-library 解决的一个问题，因为理想情况下，我们只希望我们的用户界面能够正常工作并最终正确显示。...使用此工具，您可以将鼠标悬停在节点上，这些节点是指向树中与它们直接相关的组件的链接。...它们会用橙色/红色标出严重的重渲染问题，帮助我们在开发页面时更容易的发现一些性能问题。除非我们的目标是构建平庸的应用程序，否则为什么不试试这个在我们身边的好东西。 18.

3.2K2 1

21个让React 开发更高效更有趣的工具

猴子补丁主要有以下几个用处：在运行时替换方法、属性等在不修改第三方代码的情况下增加原来不支持的功能在运行时为内存中的对象增加patch而不是在磁盘的源代码中增加这非常有用，不仅可以指导咱们修复项目的性能...7. react-testing-library react-testing-library 是一个很棒的测试库，编写单元测试时，它会让你感觉很好。...使用此工具，您可以将鼠标悬停在节点上，这些节点是指向与树中组件直接相关的组件的链接。...如果在查看结果时遇到问题，可以在地址栏中输入chrome:extensions ，查找“React Sight”框，然后单击“Allow access to file URLs”开关，如下所示： ?...它可以帮助你在开发页面时是更容易发现一些性能问题，因为它们会使用橙色或红色对严重的重新渲染问题进行着色。 18.

1.6K2 0

问题：实际开发中的深浅拷贝问题

) oneVC 再次 push 到 twoVC，同时把 twoVC 回调过来的数据又传回去，同时展示 (此时进入通讯录界面，可以看到刚刚修改完的新的数据) ---- 实际开发中应用的场景展示 appDemo.gif...”按钮中，而errorDemo中，点击的是导航条的返回，竟然发现datas的数值也变了 ---- 为了避免空手套黄图的嫌疑，先上一下正确的版本，以证清白~ fixDemo.gif 这个问题，表面看上去很简单...，其实有一定的技术难点，如果不会lldb 进行debug调试的，可能做起来会有点吃力；目测估计，只是要有1年的实际开发经验的才做的出来，因为问题的本质不是特别好发现；友情提示，注意数据源的数据结构~...这道题有一定的技术点，如果在我放出答案前做出来或者有思路，或者发现问题本质的，可以换取github star一枚（因吹斯听~）保不齐哪天就有同样考点的面试题出现了也说不定，有兴趣的可以当做面试上机题试试...~ 问题demo

1.2K6 0

JS中的this指向问题

this指向问题 this应该是第一个让人对JavaScript困惑的问题了，但是实际上它的原理非常简单：函数的this在运行时绑定。什么叫运行时绑定？...那可就大错特错了，可千万别忘了光函数的调用方法就有两种：直接调和new一个，而能做这两个操作的地方可以说非常的多，所以还需要往下看。注意：以下例子均为严格模式下运行，非严格模式这里不做考虑。...先问自己：谁调用的它？你应该一下看不出来，这明明就是直接调的啊！可能有的基础比较扎实的人会说是window，那真是非常的恭喜你了，但你要注意的是以上代码在严格模式下是undefined。...正解：brother call / bind / apply 此为3种干预this指向的操作，限于篇幅不展开讲。...箭头函数箭头函数可以让你省很多事，因为它的this一般来说都是符合你的直觉的：它的this就是定义时候的this。

1.4K3 0

JavaScript中的this指向问题

实际应用中，常见的this指向问题在嵌套函数中丢失this：当在一个函数内部定义另一个函数，并在内部函数中使用this时，this的指向会发生变化。...可以使用箭头函数或通过在外部函数中将this赋值给一个变量来解决这一问题。事件处理函数中的this：在事件处理函数中，this通常指向触发事件的元素。...可以使用箭头函数、bind()方法，或通过在外部函数中将this赋值给一个变量来解决这一问题。...可以使用箭头函数、bind()方法，或通过在外部函数中将this赋值给一个变量来解决这一问题。对象方法中的this：在对象方法中，this通常指向调用该方法的对象。...可以使用bind()方法或箭头函数来解决这一问题。 this使用时建议遵循以下几点：确定函数调用的方式，了解this的默认绑定规则。

1.4K6 0

面试中的路由问题

面试题中的路由部分路由最初是出现在后端中，后端根据不同的路由返回不同的页面，后来随着单页面应用（SPA）诞生，前端也出现了路由，实现了不用刷新页面就可以更新页面的效果。...什么是路由简单的说，路由就是URL到函数的映射。路由的本质是监听URL的变化，然后匹配路由规则，显示相应的页面。 Router和Route 在React-Router中，路由使用基本如下所示。...服务端路由服务器端会接受到客户端的http请求，根据请求中的URL，找到响应的映射函数，然后执行该函数，向返回的值发送给客户端。...目前前端的实现方式有两种，Hash模式和History模式。 Hash模式。在url中的#及后边的部分是hash，向服务端发送请求的时候，hash部分不会发送出去。 History模式。...两种方法的比较： Hash模式只更改#后的内容，History可以通过API设置任意的同源URL； History模式可以通过API添加任意类型的数据到历史记录中，Hash模式只能更改字符串； Hash

1.7K2 0

Android中的权限问题

在Android程序中，在执行形如访问网络、读取联系人时都要声明权限，在 Android 系统版本小于6.0时，所有的权限只需要在AndroidManifest文件中声明就可以使用对应的功能了。...但是在Android6.0版本以上，Android将权限分为了普通权限和危险权限，其中普通权限的使用和以前的Android版本一样，直接在AndroidManifest文件中声明就行了，系统会自动帮我们授权...，但是危险权限不仅要在AndroidManifest文件中声明，还需要在使用权限的时候通过代码来判断用户授权并且对用户授权的结果进行对应的处理。...，我们在使用这些权限的时候不仅要在AndroidManifest文件中声明，还需要在代码中对用户的授权情况进行处理，下面以一个简单的例子来看一下如何在代码中处理危险权限：新建一个Android工程...成功的进入拨打电话的界面并且拨打我们输入的电话号码！当我们允许了之后，那么程序以后就不需要再经过用户授权了，即可以直接拨打电话（除非用户在应用程序管理中收回了我们的打电话的权限）。

2K3 0

JS中的this指向问题

全局上下文非严格模式和严格模式中this都是指向顶层对象（浏览器中是window）。...严格模式中，普通函数中的this则表现不同，表现为undefined。...优先级而箭头函数的this是上层普通函数的this或者是全局对象（浏览器中是window），所以排除，不算优先级。...是没有问题的。然而事实上，这代码是报错的。...this指向问题可以考察new、call、apply、bind，箭头函数等用法。从而扩展到作用域、闭包、原型链、继承、严格模式等。

1.7K3 0

SQL中的排名问题

ROW_NUMBER()是排序，当存在相同成绩的学生时，ROW_NUMBER()会依次进行排序，他们序号不相同，而Rank()则不一样。如果出现相同的，他们的排名是一样的。...，下面是RANK()函数的结果。...特别是对于有成绩相同的情况，DENSE_RANK()排名是连续的，RANK()是跳跃的排名，一般情况下用的排名函数就是RANK() 我们看例子：示例 SELECT RANK() OVER (ORDER...，下面是DENSE_RANK()的结果 4、NTILE() 定义：NTILE()函数是将有序分区中的行分发到指定数目的组中，各个组有编号，编号从1开始，就像我们说的'分区'一样，分为几个区，一个区会有多少个...这几兄弟就介绍完了，有空再给大家介绍分组排名的问题。

9891 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭