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

create-react-app中的`screen.getByText()` vs ` `getByText()`

在create-react-app中,screen.getByText()getByText()都是用于在测试中查找特定文本内容的方法。

screen.getByText()@testing-library/react库中提供的方法,用于在渲染的组件中查找包含指定文本的元素。它返回第一个匹配到的元素,如果找不到匹配的元素,会抛出错误。

getByText()@testing-library/dom库中提供的方法,用于在DOM节点中查找包含指定文本的元素。它返回第一个匹配到的元素,如果找不到匹配的元素,会抛出错误。

这两个方法的使用方式和参数都相似,可以接受一个字符串作为参数,表示要查找的文本内容。它们会遍历组件或DOM节点的子节点,查找包含指定文本的元素。

这两个方法在React组件的测试中非常有用。通过使用它们,我们可以方便地查找并断言组件中是否包含了特定的文本内容,从而验证组件的正确性。

以下是一些使用示例:

代码语言:txt
复制
import { render, screen } from '@testing-library/react';
import MyComponent from './MyComponent';

test('MyComponent should render "Hello, World!"', () => {
  render(<MyComponent />);
  const element = screen.getByText('Hello, World!');
  expect(element).toBeInTheDocument();
});

test('MyComponent should not render "Goodbye"', () => {
  render(<MyComponent />);
  expect(() => {
    screen.getByText('Goodbye');
  }).toThrow();
});

在上面的示例中,我们使用screen.getByText()方法来查找MyComponent组件中是否包含了特定的文本内容。如果找到了匹配的元素,我们可以进行进一步的断言验证;如果找不到匹配的元素,我们可以使用toThrow()方法来验证是否抛出了错误。

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

以上是对screen.getByText()getByText()的完善且全面的答案,涵盖了它们的概念、用法、推荐的腾讯云相关产品和产品介绍链接地址。

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

相关·内容

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

    在任何复杂应用,测试是一个至关重要方面。测试不仅仅是为了提高覆盖率,其主要目的是尽可能地模拟实际使用场景。最近,我需要为一个庞大ReactJS项目建立测试架构。让我展示给你我是如何做。...首先,我们需要创建一个可重用函数来渲染组件。这有点类似于ReactJS渲染属性模式。它将接受一个store和一个初始状态作为参数。这些是你想要使用redux存储来测试组件值。...additional prop }; renderConnected(, { initialState }); expect(screen.getByText...Route> , { initialState } ); expect(screen.queryByText('Second Page')).toBeNull(); expect(screen.getByText...); // 此时应该发生导航,我们应该在第二页上 expect(screen.getByText(/Second Page/)).toBeDefined(); expect(screen.queryByText

    9500

    React 应用架构实战 0x7:测试

    这是一种很好方法,可以以用户使用应用程序方式测试应用程序功能。 在 src/testing/test-utils.ts ,我们可以定义一些测试可以使用实用工具。...函数并将 AppProvider 添加为 wrapper 需要这个函数是因为在我们集成测试,我们组件依赖于 AppProvider 定义多个依赖项,如 React Query 上下文、通知...等等 提供 AppProvider 作为 wrapper 将在我们进行测试时用于渲染组件 checkTableValues 是一个函数,它遍历表格所有单元格,并将每个值与提供数据相应值进行比较...should render the jobs list", async () => { await appRender(); expect(screen.getByText...为了对我们应用程序进行端到端测试,我们可以使用 Cypress,这是一个非常流行测试框架,它通过在无头浏览器执行测试来工作。这意味着测试将在真实浏览器环境运行。

    1.6K80

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

    猴子补丁主要有以下几个用处: 在运行时替换方法、属性等 在不修改第三方代码情况下增加原来不支持功能 在运行时为内存对象增加patch而不是在磁盘源代码增加 这非常有用,不仅可以指导咱们修复项目的性能...还有什么比 npx create-react-app 更简单呢 咱们还有些人可能不知道是如何使用CRA创建TypeScript项目,这个也很简单,只需要在末尾添加--typescript...即可: npx create-react-app — typescript 这样可以省去手动将TypeScript添加到CRA创建项目中麻烦。...使用此工具,您可以将鼠标悬停在节点上,这些节点是指向与树组件直接相关组件链接。...15. folderize folderize是一个VS Code 扩展。 它允许您将组件文件转换为组件文件夹结构。 React 组件仍然是一个组件,只是转换为一个目录。

    2.4K30

    vs没有vc_vs控件

    2.关闭文件 函数close() 对文件进行完读写操作之后,必须将文件关闭使得文件重新变成可以访问。close()函数负责将缓存数据排放出来并关闭文件。...file)和二进制文件(binary file)计算方法都是不同,因为文本模式文件某些特殊字符可能被修改。...参数size 是一个整数值,表示要从缓存(buffer)读出或写入字符数。...例如,对于一个输出流, 每次成员函数put (写一个单个字符)被调用,这个字符不是直接被写入该输出流所对应物理文件,而是首先被插入到该流缓存(buffer)。...当缓存被排放出来(flush)时,它里面的所有数据或者被写入物理媒质(如果是一个输出流的话),或者简单被抹掉(如果是一个输入流的话)。

    75520

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

    猴子补丁主要有以下几个用处: 在运行时替换方法、属性等 在不修改第三方代码情况下增加原来不支持功能 在运行时为内存对象增加patch而不是在磁盘源代码增加 这非常有用,不仅可以指导咱们修复项目的性能...还有什么比 npx create-react-app 更简单呢 咱们还有些人可能不知道是如何使用CRA创建TypeScript项目,这个也很简单,只需要在末尾添加--typescript...即可: npx create-react-app — typescript 这样可以省去手动将TypeScript添加到CRA创建项目中麻烦。...使用此工具,您可以将鼠标悬停在节点上,这些节点是指向与树组件直接相关组件链接。...15. folderize folderize是一个VS Code 扩展。 它允许您将组件文件转换为组件文件夹结构。 React 组件仍然是一个组件,只是转换为一个目录。

    98520

    Jest:给你 React 项目加上单元测试

    单元测试(Unit Testing),指的是对程序模块(最小单位)进行检查和验证。比如一个函数、一个类、一个组件,它们都是模块。 使用单元测试优点: 更好地交付高质量代码。...注释和文档容易忘记修改,但测试用例描述永远是准确,因为不对就无法通过测试; 可测试性好代码,往往可维护性更好。...; toContain:数组是否含有某个元素; toBeLessThan:是否小于某个值,可以做性能测试,执行某个函数几千次,时间不能高于某个值。.../App'; test('renders learn react link', () => { render(); const linkElement = screen.getByText...const BtnElement = screen.getByText(text); // 测试元素是否在 Document 上 expect(BtnElement).toBeInTheDocument

    2.9K20

    create-react-appCSS Module不生效解决办法

    第一种方式 create-react-app 内置了使用 CSS Modules 配置,create-react-app 内置用法是将所有的 .css / .less / .scss 等样式文件都修改成...第二种方式 使用命令: npm run eject 此命令会将脚手架隐藏配置都展示出来,此过程不可逆 运行完成之后,打开 config/webpack.config.js 文件,找到 test: cssRegex...这一行,在 use 属性执行方法添加 modules: true,如下: test: cssRegex, exclude: cssModuleRegex, use: getStyleLoaders...本文关键词:create-react-appCSS Module不生效解决办法、create-react-appCSS Module不生效、create-react-app CSS Module配置...、create-react-app中使用CSS Module、create-react-appCSS Module使用方法 未经允许不得转载:w3h5 » create-react-appCSS

    2.3K40
    领券