将变量作为参数从react测试库传递到getByText不起作用 - 腾讯云开发者社区

文章/答案/技术大牛

发布

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

该项目已经在使用Enzyme进行测试。虽然Enzyme是一个不错的库，但是react-testing-library是测试React组件的更好选择。React团队也推荐使用它。...它将接受一个store和一个初始状态作为参数。这些是你想要使用redux存储来测试组件的值。...和初始状态作为函数的参数。...场景3：使用React Router进行测试将任何操作完成后导航到新路由是一种非常常见的做法。比如说，你希望在登录成功后将用户重定向到首页。我们该怎么做呢？...我们可以利用react-router提供的MemoryRouter。我们可以传递URL路径并测试我们的组件。我们稍后将看到它是如何工作的，但首先让我们将其添加到代码中！

1.1K0 0

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

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

16.5K3 3

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

是的

没有找到

Jest 单元测试快速上手指南

react react-dom 和声明 yarn add -D @types/react安装 react 测试库 yarn add -D @testing-library/react @testing-library...filename) { return `module.exports = ${JSON.stringify(path.basename(filename))};`; }, }; 这里是将资源文件名作为模块导出内容...} = render(); // 传递 props const $button = getByText('button'...}); }); 还有官网 mock axios npm 模块的例子 https://jestjs.io/docs/en/mock-functions#mocking-modules mock 环境变量和命令行参数...有的模块会从环境变量和命令行参数取值, 并且可能是在模块初始化时获取的 // process.ts const { env, argv } = process; export function getEnvironmentValue

4.2K3 0

40道ReactJS 面试问题及答案

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

8.7K1 0

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

测试组件首先使用 create-react-app 初始化一个 react 项目。目前 cra 已经内置了 @testing-library/react 作为测试框架。..."> } export default Confirmation 然后把这个组件导入到测试中，它现在通过了。...动态问题测试这个问题也是动态的，这样它就可以从组件外部传入。...现在我们得到了我们想要的组件渲染的 HTML ，现在我想要确保我可以从外部传递这个组件的按钮的回调函数，并确保它们在单击按钮时被调用。...“onOk”处理函数传递给组件，模拟单击“确认”按钮，并断言函数已被调用。

3K1 0

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:

1.8K0 0

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

测试组件首先使用 create-react-app 初始化一个 react 项目。目前 cra 已经内置了 @testing-library/react 作为测试框架。...确保渲染测试第一个测试相当抽象。仅仅需要检查组件是否展现(任何东西) ，以确保这个组件是存在。但是实际上，我将测试的组件还不存在。..."dialog">; }; export default Confirmation; 然后把这个组件导入到测试中，它现在通过了。...动态问题测试这个问题也是动态的，这样它就可以从组件外部传入。...现在我们得到了我们想要的组件渲染的 HTML ，现在我想要确保我可以从外部传递这个组件的按钮的回调函数，并确保它们在单击按钮时被调用。

3K1 0

如何测试 React 异步组件？

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

4.5K5 0

AI 协作开发 | 快速搭建线下超商门店数据看板脚手架开发实战

它们在不同阶段发挥了重要作用：从项目初始化的脚手架生成，到核心功能开发的代码建议，再到性能优化的问题诊断，AI工具全程扮演着技术配对编程伙伴的角色。...它推荐使用React作为前端框架，结合Recharts进行数据可视化，使用Red进行状态管理，并建议采用Webpack作为构建工具。...参数解析：webpackConfig是原始的Webpack配置，通过修改这个对象可以实现自定义配置。SVGR加载器将SVG文件转换为React组件，便于在代码中直接使用。...重点逻辑：代码分割(splitChunks)将第三方库(vendor)和公共代码(common)分离，避免重复打包，提高缓存利用率。...从项目初始化到核心功能开发，从性能优化到测试部署，AI工具在每个阶段都提供了有价值的技术建议和代码示例，帮助我克服了许多技术挑战。首先，AI助手在项目初始化和脚手架搭建阶段发挥了重要作用。

4982 0

使用 TypeScript 编写 React.js 应用 | 笔记

, null, ' ') 第三个参数被用于插入空格到输出 JSON 字符串出于可读性目的第二个参数是一个替换函数，因此我们可以传递 null，因为我们不需要替换任何东西。...handleEditClick 事件处理程序添加到 ProjectCard ，该处理程序将 project 作为参数并将其记录到 console 。...更新 handleEditClick 事件将调用传递到 onEdit props 中的函数并删除 console.log 语句。...路由参数导航到带有参数的路由将 find 方法添加到 projectAPI 以返回单个 Project x id src\projects\projectAPI.ts const projectAPI...打开命令提示符或终端并运行以下命令，从 React 测试库后面的核心测试库中安装 user-event 。

2.5K9 0

前端反卷计划-组件库-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-组件样式持续更新目前这些内容持续更新到了我的学习文档中。

7091 0

单元测试

代码信心的体现测试可以确保得到预期的结果作为现有代码行为的描述促使开发者写可测试的代码，可测试的代码可读性会更高如果依赖的组件有修改，受影响的组件能在测试中发现错误测试内容什么是细节？...）需提前了解的内容 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 的工具库。它提供了一组用于编写可靠和可维护的测试的实用函数和工具。...检查测试用例代码中是否存在任何可能导致测试环境污染或干扰的因素，例如全局状态、全局变量等。尽量将测试用例代码进行封装和隔离，以确保每个测试的独立性。

2.3K1 0

如何测试 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.5K2 0

ChatGPT 辅助重构：老旧 jQuery 项目迁移到 React 的协作日志

"代码是逻辑的诗篇，架构是思想的交响"摘要作为一名开发领域深耕多年的技术实践者，我曾经参与过一个极具挑战性的项目：将一个拥有多年历史、代码量超过3万行的jQuery项目完全重构为现代化的React应用。...整个重构过程历时6周，最终成功将项目从jQuery 1.12迁移到React 18，不仅保持了所有原有功能，还实现了40%的性能提升和60%的代码量减少。...：几乎没有自动化测试，回归测试完全依赖手工1.2 重构目标设定基于现状分析，我与ChatGPT协作制定了明确的重构目标：图1：重构目标分解流程图 - 展示从遗留项目到现代化应用的转换路径二、ChatGPT...', '从代码生成到架构设计', '从单点协助到全流程参与', '从工具使用到智能伙伴' ], // 应用场景扩展 applicationScenarios...随着AI技术的不断进步，我们将看到更加智能、更加贴近开发者需求的AI工具。作为开发者，我们需要主动拥抱这种变化，学会与AI协作，将其作为提升自身能力的重要工具。

2230 0

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

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

3.2K3 0

如何测试 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.6K2 0

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

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

1.6K2 0

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

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

3.2K2 1

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

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

2.8K2 0

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

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

8K3 0

点击加载更多

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

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

Jest 单元测试快速上手指南

40道ReactJS 面试问题及答案

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

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

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

如何测试 React 异步组件？

AI 协作开发 | 快速搭建线下超商门店数据看板脚手架开发实战

使用 TypeScript 编写 React.js 应用 | 笔记

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

单元测试

如何测试 React 路由？

ChatGPT 辅助重构：老旧 jQuery 项目迁移到 React 的协作日志

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

如何测试 React 路由？

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

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

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

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

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐