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

将变量作为参数从react测试库传递到getByText不起作用

在React测试中,将变量作为参数传递给getByText可能不起作用的原因有以下几点:

  1. 变量的值不正确:首先要确保变量的值是正确的,可以通过打印变量的值来进行验证。如果变量的值不正确,那么在使用getByText时就无法找到对应的元素。
  2. 元素还未被渲染:如果使用getByText来查找的元素还未被渲染到DOM中,那么它是无法找到的。在测试中,可以使用waitFor函数来等待元素的出现,确保元素已经被渲染到DOM中后再进行查找。
  3. 元素的文本内容不正确:getByText是根据元素的文本内容来查找元素的,如果元素的文本内容不正确,那么getByText也无法找到对应的元素。可以通过打印元素的文本内容来进行验证。
  4. 元素的选择器不正确:getByText可以接受一个字符串作为参数,用于指定元素的文本内容。如果选择器不正确,那么getByText也无法找到对应的元素。可以尝试使用其他选择器,如getByRolegetByTestId等来查找元素。

综上所述,如果将变量作为参数从React测试库传递到getByText不起作用,可以检查变量的值、元素是否被渲染、元素的文本内容以及选择器是否正确。如果问题仍然存在,可以提供更多的代码和上下文信息以便更好地帮助解决问题。

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

相关·内容

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

因此,可以DOM测试和其他一些有用的方法(如debug、rerender或unmount)获得大量查询。...•getByText:搜索具有文本节点的所有元素,其中的textContent与作为参数传递的给定文本匹配。•getByTitle:返回具有与作为参数传递的给定文本匹配的title属性的元素。...render,顾名思义,有助于渲染React组件。cleanup 作为一个参数传递给 afterEach ,以便在每次测试后清理所有东西,以避免内存泄漏。...测试计数器的增减是否正确: 为了测试递增和递减事件,我们初始状态作为第二个参数传递给renderWithRedux()。现在,我们可以单击按钮并测试预期的结果是否符合条件。...但是这一次,它只接收作为参数的组件。为了创建新的上下文,我们CounterContext传递给 Provider。 现在,我们可以测试计数器最初是否等于0。那么,计数器的增减是否正确呢?

14.9K33
  • 40道ReactJS 面试问题及答案

    Props 作为属性传递给组件,并且可以使用类组件中的 this.props 在组件内进行访问,或者作为函数组件的参数进行访问。 5. 什么是纯组件和 React.memo()?...(意味着我们在调用 setState() 时不应该依赖当前状态) 解决方案是一个函数传递给 setState(),并以先前的状态作为参数。...如果用户通过身份验证,它将呈现指定的组件(作为 prop 传递),否则,它将用户重定向登录页面。...然后,我们使用 React 测试中的 getByText 函数来获取我们想要交互的元素。...测试: 编写单元测试、集成测试和端测试,以确保 React 组件和应用程序的可靠性和功能性。 使用 Jest、React 测试、Enzyme 或 Cypress 等测试来编写和运行测试

    30010

    Jest与React Testing Library:前端测试的最佳实践

    Jest 和 React Testing Library (RTL) 是前端开发中用于测试 React 应用的首选工具。...Jest 是一个功能丰富的JavaScript测试框架,而React Testing Library 是一种提倡以用户角度编写测试,它鼓励测试组件的行为而不是内部实现细节。...('Loading...')).toBeInTheDocument();});组件测试对于复杂的组件,可以创建一个setupTests.js文件来设置全局的模拟和配置,例如:import '@testing-library...测试组件的交互性React Testing Library 强调测试组件的行为,而不是它的实现细节。...-coverage持续集成测试集成持续集成(CI)流程中,确保代码质量始终如一:# .github/workflows/test.yml (GitHub Actions)name: Teston:

    15300

    如何测试 React 异步组件?

    前言 本文承接上文 如何测试驱动开发 React 组件?,这次我继续使用 @testing-library/react测试我们的 React 应用,并简要简要说明如何测试异步组件。...异步组件的测试内容 我们知道异步请求主要用于服务器上获取数据,这个异步请求可能是主动触发的,也可能是(鼠标)事件响应,本文主要包含 2 方面内容: 如何测试在 componentDidMount 生命周期中发出的异步请求...(/密码/)).toBeInTheDocument(); }); }); 登录组件实现 为了保证是一个纯组件,提交方法onSubmit作为一个 props 传入,接下来我们实现下组件代码 import...测试登录成功 由于测试登录成功的例子已经包含了"测试提交"和"测试渲染"的功能,所以,可以前面2个单元测试删除。登录后,按钮改成 loading 状态 disabled。...,通过 toHaveBeenCalledWith 测试调用方法的参数,虽然这边是空数据,但是我们也可以写,确保调用参数是空。

    3.3K50

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

    今天开始分享如何0搭建UI组件。这也是前端反卷计划中的一项。在接下来的日子,我会持续分享前端反卷计划中的每个知识点。以下是前端反卷计划的内容:目前这些内容持续更新到了我的 学习文档 中。...,使用这4个参数来定义样式属性,使用的时候即可传入对应的样式变量即可。...path=/docs/example-button--docs4.5 单元测试测试工具https://testing-library.com/docs/react-testing-library/intro...4.5.6 完整测试用例代码import React from 'react'import { render, fireEvent } from '@testing-library/react'import...01-环境搭建前端反卷计划-组件-02-storybook前端反卷计划-组件-03-组件样式持续更新目前这些内容持续更新到了我的 学习文档 中。

    30410

    单元测试

    代码信心的体现 测试可以确保得到预期的结果 作为现有代码行为的描述 促使开发者写可测试的代码,可测试的代码可读性会更高 如果依赖的组件有修改,受影响的组件能在测试中发现错误 测试内容 什么是细节?...) 需提前了解的内容 Jest测试框架:https://jestjs.io/zh-Hans/docs/getting-started Testing Library React 测试工具:https:...@testing-library/react 是一个用于测试 React 组件的 JavaScript 测试工具,它提供了一组简单且易于使用的 API,可以帮助你编写可读性高、可维护性强的测试代码。...@testing-library/react-hooks 是一个用于测试 React Hooks 的工具。它提供了一组用于编写可靠和可维护的测试的实用函数和工具。...检查测试用例代码中是否存在任何可能导致测试环境污染或干扰的因素,例如全局状态、全局变量等。尽量测试用例代码进行封装和隔离,以确保每个测试的独立性。

    25010

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

    Guppy 启动后的的样子 7. react-testing-library react-testing-library 是一个很棒的测试,编写单元测试时,它会让你感觉很好。...这个包提供了React DOM测试实用程序,鼓励良好的测试实践。 此解决方案旨在解决测试实现细节的问题,而不是测试React组件的输入/输出,就像用户会看到它们一样。...Storybook Storybook 是一个轻松地构建UI组件的。该工具启动一个实时开发服务器,支持开箱即用的热重载,你可以在其中独立地实时开发React组件。 这足以作为普通文档页面: 11....CodeSandbox 最初只在早期阶段支持React,但它们现在已经扩展Vue和Angular等的其他入门模板。...例如,假设正在创建一个React组件,该组件文件作为props来显示有用的信息,如元数据 元数据组件的逻辑占用了大量的行,因此咱们决定将其拆分为单独的文件。

    2.4K30

    如何测试 React 路由 ?

    前言 本文承接上文 如何测试 React 异步组件?,这次我继续使用 @testing-library/react测试我们的 React 应用,并简要简要说明如何测试路由系统。...NoMatch />} /> ) } export default App 因为我们的页面足够简单,所以页面不会报错,那如果当页面变量的复杂...(screen.getByText(/这是关于页/i)).toBeInTheDocument() }) MemoryRouter 有 2 个参数 第一个参数 initialEntries={["/users.../mjackson"]} 配置初始化路由 第二个参数 initialIndex 默认是 initialEntries 中的最后一个值 测试 404 页面 test('测试路由未匹配', () => {...(new RegExp(route))).toBeInTheDocument() }) }) 小结 以下是路由测试的步骤: 程序和使用什么路由分开; 使用 MemoryRouter 来测试; 通过

    2.1K20

    如何测试 React 路由 ?

    前言 本文承接上文 如何测试 React 异步组件?,这次我继续使用 @testing-library/react测试我们的 React 应用,并简要简要说明如何测试路由系统。...NoMatch />} /> ); } export default App; 因为我们的页面足够简单,所以页面不会报错,那如果当页面变量的复杂...expect(screen.getByText(/这是关于页/i)).toBeInTheDocument(); }); MemoryRouter 有2个参数 第一个参数 initialEntries...={["/users/mjackson"]} 配置初始化路由 第二个参数 initialIndex 默认是 initialEntries 中的最后一个值 测试 404 页面 test('测试路由未匹配'...(new RegExp(route))).toBeInTheDocument(); }); }); 小结 以下是路由测试的步骤: 程序和使用什么路由分开; 使用 MemoryRouter 来测试;

    2.1K20

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

    7. react-testing-library react-testing-library 是一个很棒的测试,编写单元测试时,它会让你感觉很好。...这个包提供了React DOM测试实用程序,鼓励良好的测试实践。 此解决方案旨在解决测试实现细节的问题,而不是测试React组件的输入/输出,就像用户会看到它们一样。...Storybook Storybook 是一个轻松地构建UI组件的。该工具启动一个实时开发服务器,支持开箱即用的热重载,你可以在其中独立地实时开发React组件。 这足以作为普通文档页面: ?...CodeSandbox 最初只在早期阶段支持React,但它们现在已经扩展Vue和Angular等的其他入门模板。...例如,假设正在创建一个React组件,该组件文件作为props来显示有用的信息,如元数据 元数据组件的逻辑占用了大量的行,因此咱们决定将其拆分为单独的文件。

    98220

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

    这个包提供了 DOM 测试实用程序,鼓励良好的测试实践。 此解决方案旨在解决测试实施细节的问题,就像用户可以看到它们一样,而不是测试 React 组件的输入/输出。...但是,如果我们必须更改实现方式以指向另一个数据的话,单元测试就会失败,因为这些是耦合逻辑的实现细节。...这个称为 CodeSandbox (https://codesandbox.io/)的工具是一个在线编辑器,我们创建原型 Web 应用程序部署 - 都可以在这个网站实现!...在早期,Codesandbox 仅支持 React,但现在已经扩展 Vue 和 Angular 等的其他入门模板。...我可能会忘记其他网站只从这个链接学习 React 。因为可以在此找到大量有用的资源,这些资源肯定会帮助我们构建出色的 React 应用程序! 21.

    2.4K21

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

    新代码应该使用 css-in-js e m o t i o n - 它允许您将样式绑定元素而无需全局选择器的间接性。你甚至不需要打开另一个文件!...使用 React Testing Library 我们正在将我们的测试 Enzyme 转换为 React Testing Library。在本指南中,您将找到遵循最佳实践和避免常见陷阱的技巧。...我们通过 label 文本找到表单元素(就像用户一样),我们他们的文本中找到链接和按钮(就像用户一样)。 作为此目标的一部分,我们避免测试实现细节,因此重构(更改实现但不是功能)不会破坏测试。...变量抛出更有用的错误消息。...为了升级最新版本的 emotion,我们需要迁移出 grid-emotion。 要迁移,请使用 emotion 导入的 和 组件替换为带样式的组件。

    6.9K30

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

    test 方法创建了一个测试的作用域,该方法有三个参数测试的描述。 我们写测试代码的函数。 测试超时时间,默认为 5 秒,有些测试是异步的,我们需要等待。...afterAll,在当前文件所有测试结束后执行一次,适合做一些收尾工作,比如数据清空。 afterEach,在当前文件的每个 test 执行完后都调用一次。...但 Jest 本身并不支持 React 组件的测试 API,需要使用另外一个内置的 React Testing Library 测试 React 组件。...React Testing Library 是 以用户为角度 的测试,能够模拟浏览器的 DOM, React 组件挂载上去后,我们使用其提供的一些模拟用户操作的 API 进行测试。...,Jest 作为流行的测试值得一试。

    2.9K20

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

    这个包提供了实用的 DOM 测试程序,鼓励良好的测试实践。 此解决方案旨在解决测试实施细节的问题,就像用户可以看到它们一样,而不是测试 React 组件的输入/输出。...但是,如果我们必须更改实现方式以指向另一个数据的话,单元测试就会失败,因为这些是耦合逻辑的实现细节。...这个称为 CodeSandbox 的工具是一个在线编辑器,我们创建原型 Web 应用程序部署 - 都可以在这个网站实现!...在早期,Codesandbox 仅支持 React,但现在已经扩展 Vue 和 Angular 等。...它可以让我们组件文件转换为组件文件夹结构。转换后的 React 组件仍将是一个组件,只是现在已转换为一个目录。

    2K20

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

    我们介绍使用Enzyme和React Testing Library编写测试,这两个都能做到这一点。...我们使用断言,在进一步模拟单击事件之前,输入“修复失败测试”,该事件应该新的项目添加到待办事项列表中。 最后,断言列表中有三个项,并且第三个项与我们创建的项相等。...为了模拟添加新待办项的单击事件,我们使用fireEvent.click()方法并传入getByText()方法,该方法返回的是文本与我们传的参数匹配的节点。...规则2:React功能组件调用钩子 钩子用于React的功能组件,而不是React的类组件或JavaScript函数。 当谈到语法检查,我们基本上涵盖了所有不应该做的情况。...React App,那么你应该知道,3.0.0版本开始,该包就支持开箱即用的lint插件。

    4.1K30
    领券