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

如何使用React Testing Library获取共享相同文本的按钮?

React Testing Library 是一个用于测试 React 组件的工具库。它提供了一套简单而强大的 API,使得测试组件的行为和用户交互非常方便。要获取共享相同文本的按钮,可以按照以下步骤进行:

  1. 首先,安装 React Testing Library:
  2. 首先,安装 React Testing Library:
  3. 在测试文件中引入 React Testing Library:
  4. 在测试文件中引入 React Testing Library:
  5. 渲染包含按钮的组件:
  6. 渲染包含按钮的组件:
  7. 使用 screen.getAllByRole 选择所有按钮元素:
  8. 使用 screen.getAllByRole 选择所有按钮元素:
  9. 使用 screen.getByText 根据文本内容选择按钮:
  10. 使用 screen.getByText 根据文本内容选择按钮:
  11. 断言获取到的按钮是否符合预期:
  12. 断言获取到的按钮是否符合预期:

React Testing Library 的优势在于它更加关注组件的用户行为和交互,而不是内部实现细节。这种方式可以更好地模拟用户与组件的交互,提高测试的质量和可靠性。

推荐的腾讯云产品和产品介绍链接地址:

以上是腾讯云在相关领域的产品,可根据具体需求选择合适的产品来支持和扩展应用。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

技术栈选择 当我们想要为 React 应用编写单元测试时候,官方推荐是使用 React Testing Library[1] + Jest[2] 方式。...下面让我们看一个简单计数器例子,以及两个相应测试:第一个是使用 Enzyme[4] 编写,第二个是使用 React Testing Library[5] 编写。...更加符合我们对于单元测试原本诉求,以及最佳实践。 可遵循简单规则 也许上文中使用 React Testing Library 编写单元测试示例,还会给人一种一头雾水感觉。...Redux部分一样,这里我们使用相同方法,创建一个助手函数renderWithContext()来呈现组件。...最后,我们将使用Jest函数mockResolvedValueOnce()来传递模拟数据作为参数。 现在,对于第二个测试,我们可以单击按钮获取数据并使用async/await来解析它。

14.9K33

搞懂了,React 中原来要这样测试自定义 Hooks

本文中,我们将探索如何使用 React Testing Library 测试库来测试自定义钩子。 如何测试 React 组件 开始前,首先让我们回顾一下如何测试一个基本 React 组件。...React Testing Library 测试 Counter 组件,通常需要遵循以下步骤: 使用 Render 函数来渲染组件。...使用 screen 对象获取 DOM 元素(可以使用 ByRole 来查询元素)。 使用 @testing-library/user-event 库模拟用户事件。 对呈现输出进行断言。...使用 renderHook() 测试自定义 Hooks 要在 React 中测试自定义钩子,我们可以使用 React Testing Library 测试库提供 renderHook() 函数。...总结 当使用 React Testing Library 测试自定义钩子时,我们使用 renderHook() 函数来渲染我们自定义钩子,并验证它是否返回预期值。

37540

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

使用自定义 hooks 注意 hooks 规则和注意事项 我们基础视图组件仍然是基于类 不要为 hooks 重写 使用 React Testing Library 查询 技巧 迁移 - grid-emotion...React Testing Library。...使用 React Testing Library 我们正在将我们测试从 Enzyme 转换为 React Testing Library。在本指南中,您将找到遵循最佳实践和避免常见陷阱技巧。...eslint-plugin-testing-library https://github.com/testing-library/eslint-plugin-testing-library 我们努力以一种与应用程序使用方式非常相似的方式编写测试...我们不是处理渲染组件实例,而是以与用户相同方式查询 DOM。我们通过 label 文本找到表单元素(就像用户一样),我们从他们文本中找到链接和按钮(就像用户一样)。

6.9K30

如何测试 React 异步组件?

前言 本文承接上文 如何测试驱动开发 React 组件?,这次我将继续使用 @testing-library/react 来测试我们 React 应用,并简要简要说明如何测试异步组件。...异步组件测试内容 我们知道异步请求主要用于从服务器上获取数据,这个异步请求可能是主动触发,也可能是(鼠标)事件响应,本文主要包含 2 方面内容: 如何测试在 componentDidMount 生命周期中发出异步请求...@test-library/user-event import React from "react"; import { render, screen, waitFor } from "@testing-library... get*By* 函数获取dom 中元素, 这里使用 getByPlaceholderText 以上测试用例只测试了登录函数,但是我们并未写登录成功或者失败逻辑,接下来来我们通过 jest ..."@testing-library/react"; import Posts from ".

3.3K50

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

在任何复杂应用中,测试是一个至关重要方面。测试不仅仅是为了提高覆盖率,其主要目的是尽可能地模拟实际使用场景。最近,我需要为一个庞大ReactJS项目建立测试架构。让我展示给你我是如何。...虽然Enzyme是一个不错库,但是react-testing-library是测试React组件更好选择。React团队也推荐使用它。...而react-testing-library是测试任何现代React应用程序推荐方式。...虽然react-testing-library使根据组件行为轻松直观地进行测试变得很容易,但有时设置要测试组件可能会变得复杂。...现在,不再使用react-testing-library提供默认渲染方法,你可以使用renderConnected函数测试你组件,并传递你想要存储部分。

9200

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

原文:https://css-tricks.com/testing-react-hooks-with-enzyme-and-react-testing-library/ 当你开始在应用中使用React...我们将介绍使用Enzyme和React Testing Library编写测试,这两个库都能做到这一点。...如果你第一次使用Enzyme,我们之前发布过关于它文章,《Enzyme如何React应用中与Jest一起使用》。我们可以用他们来深入测试React Hooks。...使用react-testing-library测试 我们将为此写三个测试: 1、初始待办事项渲染 2、我们可以加一个新待办事项 3、我们可以删除一个待办事项 首先,我们安装需要安装包: npm install...--save-dev @testing-library/jest-dom @testing-library/react 接下来,我们可以导入安装包和文件: import React from "react

4.1K30

Webify 新增自动适配框架和一键部署能力

Webify 如何实现「自动适配框架」? 项目根目录下 package.json 中记录了项目的第三方依赖关系,这些依赖关系通常能折射出项目许多信息。...package.json 示例 {     "dependencies": {         "@testing-library/jest-dom": "^5.11.4",         "@testing-library.../react": "^11.1.0",         "@testing-library/user-event": "^12.1.10",         "react": "^17.0.2",         ...react-scripts 或者 react-dev-utils 依赖,那就表示项目大概率是使用 create-react-app 脚手架创建 React 项目。...用户点击按钮后,就可以直接进入到创建 Webify 应用流程中(以 React 模板项目为例): ? 如何生成自己项目的按钮

55520

如何测试驱动开发 React 组件?

测试组件 首先使用 create-react-app 初始化一个 react 项目。目前 cra 已经内置了 @testing-library/react 作为测试框架。...import React from 'react'; import { render } from '@testing-library/react'; describe('Confirmation component...: import React from "react"; import { render, fireEvent } from "@testing-library/react"; import Confirmation...小结 当然 @testing-library/react 还有很多方便 api。大家可以自行查阅。 未来可能会出一些文章关于测试文章。例如: 如何出测试 react hooks ?...如何测试react 路由? 如何测试接口? 希望这篇文章对大家有所帮助,也可以参考我往期文章或者在评论区交流你想法和心得,欢迎一起探索前端。

2.1K10

搬砖 React 4 年,我总结了这些企业级应用要点

在以下章节中,我们将深入探讨这些原则如何转化为可执行策略和最佳实践。 文件夹和文件结构 在 React 中,使用经过深思熟虑文件夹结构组织项目对于维护性和可扩展性至关重要。...下面是我在构建可扩展应用时使用一些包。 React Query/Tanstack Query React Query 在管理复杂企业应用中数据获取和同步方面非常有益。...React Testing Library React Testing Library 是对 React 组件进行单元和集成测试必备之物。...在企业应用中,验证各个组件预期工作方式对健壮应用非常关键。React Testing Library 允许彻底测试每个组件隔离情况,以及与其他组件结合情况。...保持你代码库直接和关注点单一。每段代码都应该有单一、清晰目的。 了解底层工作原理。在了解 React 如何检查两个值是否相同后,我发表了一篇文章。

48440

如何测试驱动开发 React 组件?

测试组件 首先使用 create-react-app 初始化一个 react 项目。目前 cra 已经内置了 @testing-library/react 作为测试框架。...import React from 'react' import { render } from '@testing-library/react' describe('Confirmation component...: import React from 'react' import { render, fireEvent } from '@testing-library/react' import Confirmation...小结 当然 @testing-library/react 还有很多方便 api。大家可以自行查阅。 image.png 未来可能会出一些文章关于测试文章。...例如: 如何出测试 react hooks ? 如何测试 react 路由? 如何测试接口? 希望这篇文章对大家有所帮助,也可以参考我往期文章或者在评论区交流你想法和心得,欢迎一起探索前端。

2.2K10

前端单测,为什么不要测 “实现细节”?

最近在给 React 组件写单测时候,发现了 Kent (React Testing Library 贡献者之一)Testing Implementation Details》 这篇文章,里面对...不再测试实现细节 当然你也可能用 Enzyme 去重写这些测试用例,然后限制其它人别用上面这些 API,但是我可能会选择 React Testing Library,因为它 API 本身限制了开发者,...import * as React from 'react' import {render, screen} from '@testing-library/react' import userEvent...这也正是 React Testing Library 测试思路:把 Mock Props 传给 Accordion 组件,然后通过 RTL API 来验证 render 函数输出内容、测试...首先是要用正确工具,比如 React Testing Library :) 如果你还是不知道应该测试什么,可以跟着下面这个流程走一波: 如果崩了,哪些没有测试过代码影响最严重?

94650

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

在这篇文章中,我们将体验强大 react-hooks-testing-library,学习如何去测试钩子同步和异步逻辑,并最终通过一个完整例子去了解如何结合 Redux 框架进行测试。...开始使用 react-hooks-testing-library 在上一篇教程中,我们手工编写了非常原始 React Hooks 测试代码。...所幸,由于测试 React Hooks 需求非常普遍,因此就有了测试 Hooks 神器:react-hooks-testing-library。...让我们先安装 react-hooks-testing-library: npm install @testing-library/react-hooks react-hooks-testing-library...提示 react-hooks-testing-library 还提供了一些工具函数用来辅助异步钩子测试,可参考官方文档 Async Utilities 部分。

2.1K00

单元测试

@testing-library/react-hooks 是一个用于测试 React Hooks 工具库。它提供了一组用于编写可靠和可维护测试实用函数和工具。.../react'; import React from 'react'; import '@testing-library/jest-dom'; import FormCard from '..../react'; import React from 'react'; import '@testing-library/jest-dom'; import userEvent from '@testing-library...这样可以确保每个测试用例都在相同初始状态下运行,并且没有残留状态或影响。 在每个测试用例之后使用 afterEach 函数或 afterAll 函数来清理测试环境。...act } from '@testing-library/react'; act 是一个用于处理 React 组件异步更新和副作用工具函数,它主要作用是确保在测试中正确地触发和等待组件更新。

23010
领券