如何使用React Testing Library获取共享相同文本的按钮？
React Testing Library 是一个用于测试 React 组件的工具库。它提供了一套简单而强大的 API，使得测试组件的行为和用户交互非常方便。要获取共享相同文本的按钮，可以按照以下步骤进行：
- 首先，安装 React Testing Library：
- 首先，安装 React Testing Library：
- 在测试文件中引入 React Testing Library：
- 在测试文件中引入 React Testing Library：
- 渲染包含按钮的组件：
- 渲染包含按钮的组件：
- 使用
screen.getAllByRole选择所有按钮元素： - 使用
screen.getAllByRole选择所有按钮元素： - 使用
screen.getByText根据文本内容选择按钮： - 使用
screen.getByText根据文本内容选择按钮： - 断言获取到的按钮是否符合预期：
- 断言获取到的按钮是否符合预期：
React Testing Library 的优势在于它更加关注组件的用户行为和交互，而不是内部实现细节。这种方式可以更好地模拟用户与组件的交互，提高测试的质量和可靠性。
推荐的腾讯云产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：腾讯云提供的云服务器，可支持各类应用的部署和运行。
- 腾讯云容器服务（TKE）：腾讯云的容器服务，可以帮助用户快速部署、管理和扩展容器化应用。
- 腾讯云函数计算（SCF）：腾讯云的无服务器计算服务，可快速构建和运行事件驱动的应用程序。
- 腾讯云对象存储（COS）：腾讯云提供的对象存储服务，可用于存储和管理各类数据和文件。
- 腾讯云人工智能服务（AI）：腾讯云提供的人工智能服务，包括图像识别、语音识别、自然语言处理等功能。
以上是腾讯云在相关领域的产品，可根据具体需求选择合适的产品来支持和扩展应用。
相关·内容
我的组件有一个名称列表，每个名称旁边都有一个add按钮 <h1>Select one of me!div>
<button>contrived</button>
<button>beep</button> 如果我想在底部列表中选择beep或contrived，应该如何配置这些按钮，以便我可以在没有测试I或使用我对当前结构的了解<em
浏览 24提问于2021-04-16得票数 1
回答已采纳
尝试了所有在互联网上推荐的方法，但仍然没有成功，下面是我的代码：<div className="input-area"> });
也尝试过使用
浏览 10提问于2022-08-05得票数 1
项目目前正在使用这些版本。^6.10.0","@testing-library/react": "^9.3.1",运行这样的<
浏览 3提问于2019-11-01得票数 1
回答已采纳
有一些material-ui组件不会将其结果呈现在与其父级放置组件相同的位置。其中我们有Dialog、Menu等。 onButtonClick = (e) => {
this.setState({ open: true-- react-empty: 5 --></d
浏览 0提问于2017-08-08得票数 12
我试图配置一个多页设置与反应使用路由器-多姆。我已经设置好了密码，一切都很好。没有错误。然而，实际的应用程序根本不显示任何信息。
浏览 8提问于2022-04-17得票数 0
回答已采纳
我正在尝试使用react-testing-library测试redux-form中的代码。为文本输入字段调用fireEvent.change来设置新值我希望输入的值应该被更新，但它从来没有发生过。请在下面找到测试的片段。完整的代码可以在上找到任何好的例子如何使用react-testing-library测试redux-form？
浏览 1提问于2019-06-16得票数 7
我一直在使用“react-test-renderer”来测试react-native，主要是在它的函数上。最近我发现有一个用于react-native的测试库，它是@ that library /react-native。我想要做的是检查函数中是否调用了navigation.navigate或alert。我不知道这些库中有哪些可以做到这一点，以及如何做到这一点。
浏览 0提问于2020-06-02得票数 1
2回答
useEffect通常使用更新状态的承诺。如何正确地为这种情况编写Jest测试？import React from "react";import { create, act } from "react-test-renderer";
it("works", () =&
浏览 25提问于2022-01-14得票数 2
回答已采纳
我有一个组件，它返回已导入的另一个组件(HelloComponent)。在我的测试中，我想检查文档中是否有HelloComponent。我的组件： return ( <HelloComponent /> );export default Plans;
我的测试
浏览 3提问于2021-11-23得票数 1
2回答
我在测试React testing Library中API调用的数据填充的下拉列表时遇到了问题。下面是显示该问题的CodeSandbox https://codesandbox.io/s/mutable-sea-wtt9u 如果我将App更改为使用硬编码数组来填充下拉列表(在App组件中已注释掉)
浏览 28提问于2019-08-27得票数 0
回答已采纳
我有一个由导航库添加的具有生命周期方法的组件- React Native navigation ()。我必须在测试中调用这个生命周期方法(componentDidAppear)，以便正确呈现我的组件。
当我使用React Test Renderer时，我能够在组件实例上调用此方法。如何使用React Native Testing Library调用它？如何在RN Testi
浏览 1提问于2020-02-09得票数 1
我试着用waitForElementToBeRemoved只使用一个元素，但Jest是超时的。当我传递一个函数时，它起作用了。我从这个特性中得到的理解是，它应该能够接受一个元素：
我验证了我的应用程序使用的是@testing library/dom@7.8.0。
浏览 0提问于2020-06-02得票数 14
回答已采纳
3回答
我正在使用React 和Jest来测试我的React/Redux应用程序。就像这样..。，第一个<App />的状态正在“泄漏”到下一个测试中，我希望我的每个测试都是独立的。下面是renderWithRedux的定义
import React from &quo
浏览 0提问于2019-12-09得票数 2
我测试的组件呈现了以下内容： <div>Text<span>span text</span></div> 事实证明，对于测试，我唯一可靠的文本是“span text”，但我想要获取<div>的“Text使用Jest和react-Jest library我可以 await screen.findByText(spanText) 这将返回一个HTMLElement，但它似乎是有
浏览 17提问于2020-07-07得票数 22
回答已采纳
2回答
反应材料UI按钮组件不工作
、、、、
我已经安装了创建-反应-应用程序和材料-用户界面/核心，并已着手制作一个简单的按钮。在将Button添加到App文件并使用命令npm之后，我希望按钮在浏览器中显示，相反，我会得到错误的无效钩子调用。import {Button} from '@material-ui/core';
export default fun
浏览 3提问于2021-12-03得票数 0
回答已采纳
2回答
我正在使用@testing-library/react并使测试套件正常工作，但是我无法让我的测试开始工作。这必须是唯一的，还是可以按原样进行测试？
// Imports: Dependencies
浏览 7提问于2020-12-17得票数 2
1回答
我正在使用Jest +Testing/React编写功能测试。经过几天的绞尽脑汁，我发现当您使用.mockResolvedValue(...)或.mockResolvedValueOnce(...)时，模拟的范围并不限于该测试.import { render, waitForElement } from '@testing-libra
浏览 3提问于2019-11-16得票数 9
我是反应测试库的新手const ComponentA = () => { const toggle = () =>：import { ComponentA } from "./";
import { render } from "
浏览 3提问于2020-05-14得票数 2
在测试表单时，我使用userEvent在文本框中输入'hello‘，然后使用toHaveValue()直接测试所述文本框的值时，它向后返回字符串...包版本： "react-scripts": "^3.4.3", "@testing<
浏览 7提问于2021-06-28得票数 6
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
