
- ReactJS 教程
- ReactJS - 首页
- ReactJS - 简介
- ReactJS - 路线图
- ReactJS - 安装
- ReactJS - 特性
- ReactJS - 优点与缺点
- ReactJS - 架构
- ReactJS - 创建 React 应用
- ReactJS - JSX
- ReactJS - 组件
- ReactJS - 嵌套组件
- ReactJS - 使用新创建的组件
- ReactJS - 组件集合
- ReactJS - 样式
- ReactJS - 属性 (props)
- ReactJS - 使用属性创建组件
- ReactJS - props 校验
- ReactJS - 构造函数
- ReactJS - 组件生命周期
- ReactJS - 事件管理
- ReactJS - 创建一个事件感知组件
- ReactJS - 在 Expense Manager 应用中引入事件
- ReactJS - 状态管理
- ReactJS - 状态管理 API
- ReactJS - 无状态组件
- ReactJS - 使用 React Hooks 进行状态管理
- ReactJS - 使用 React Hooks 的组件生命周期
- ReactJS - 布局组件
- ReactJS - 分页
- ReactJS - Material UI
- ReactJS - Http 客户端编程
- ReactJS - 表单编程
- ReactJS - 受控组件
- ReactJS - 非受控组件
- ReactJS - Formik
- ReactJS - 条件渲染
- ReactJS - 列表
- ReactJS - Keys
- ReactJS - 路由
- ReactJS - Redux
- ReactJS - 动画
- ReactJS - Bootstrap
- ReactJS - Map
- ReactJS - 表格
- ReactJS - 使用 Flux 管理状态
- ReactJS - 测试
- ReactJS - CLI 命令
- ReactJS - 构建和部署
- ReactJS - 示例
- Hooks
- ReactJS - Hooks 简介
- ReactJS - 使用 useState
- ReactJS - 使用 useEffect
- ReactJS - 使用 useContext
- ReactJS - 使用 useRef
- ReactJS - 使用 useReducer
- ReactJS - 使用 useCallback
- ReactJS - 使用 useMemo
- ReactJS - 自定义 Hooks
- ReactJS 高级
- ReactJS - 可访问性
- ReactJS - 代码分割
- ReactJS - Context
- ReactJS - 错误边界
- ReactJS - 转发 Refs
- ReactJS - Fragments
- ReactJS - 高阶组件
- ReactJS - 与其他库集成
- ReactJS - 性能优化
- ReactJS - Profiler API
- ReactJS - Portals
- ReactJS - 无需 ES6 ECMAScript 的 React
- ReactJS - 无需 JSX 的 React
- ReactJS - 调和
- ReactJS - Refs 和 DOM
- ReactJS - Render Props
- ReactJS - 静态类型检查
- ReactJS - Strict Mode
- ReactJS - Web Components
- 其他概念
- ReactJS - 日期选择器
- ReactJS - Helmet
- ReactJS - 内联样式
- ReactJS - PropTypes
- ReactJS - BrowserRouter
- ReactJS - DOM
- ReactJS - 轮播图
- ReactJS - 图标
- ReactJS - 表单组件
- ReactJS - 参考 API
- ReactJS 有用资源
- ReactJS - 快速指南
- ReactJS - 有用资源
- ReactJS - 讨论
ReactJS - findRenderedDOMComponentWithClass()
在 ReactJS 中,`findRenderedDOMComponentWithClass()` 方法用于测试。它帮助我们找到 DOM 中具有特定 CSS 类的已渲染组件。此方法主要用于测试 React 组件。
当为我们的 React 组件编写测试时,我们可以检查具有给定 CSS 类的组件是否出现在渲染输出中。这正是 `findRenderedDOMComponentWithClass()` 的作用。因此,我们将此函数传递给已渲染的组件和我们想要的 CSS 类。然后返回具有该类的第一个 DOM 元素。
请记住,此函数在早期版本的 React 和测试框架中更常用。更新的测试库可以提供不同的方法来实现相同目标。
语法
findRenderedDOMComponentWithClass( tree, className )
参数
tree − 它是我们想要在其中搜索的显示组件或组件树。它是我们 React 组件的渲染输出,来自测试库。
className − 表示我们想要在树中查找的 CSS 类的字符串。该方法将搜索具有此特定类的 DOM 元素。
返回值
该方法将返回具有给定类的第一个 DOM 元素,使我们可以继续进行测试并执行其他操作或断言。
示例
示例 - 基本 React 应用
应用说明:这就像一个网页,在网页上显示“Hello, React!”。想象一下它是一张简单的贺卡。
测试说明 - 我们要确保贺卡的特定部分(段落)存在。因此,我们使用一个工具来查找该部分并检查它是否符合我们的要求。
App.js
import React from 'react'; import './App.css'; function App() { return ( <div className="app-container App"> <h1>Hello, React!</h1> <p className="app-paragraph">This is a simple React app.</p> </div> ); } export default App;
App.test.js
import { render } from '@testing-library/react'; import findRenderedDOMComponentWithClass from 'path-to-findRenderedDOMComponentWithClass'; import App from './App'; test('finds a paragraph with a specific class', () => { const { container } = render(<App />); const foundElement = findRenderedDOMComponentWithClass(container, 'app-paragraph'); // Now we can make assertions or tests based on foundElement });
输出

示例 - 带有组件的 React 应用
应用说明 - 在应用程序中,假设我们有一个网页,网页有一个标题(页眉)和一个段落。它就像一个小型网站,顶部有一个标题。
测试说明 - 我们要确保标题存在。因此,我们使用一个工具来查找标题并检查它是否在正确的位置。
Header.js
import React from 'react'; function Header() { return <h1 className="header-title">Welcome to My App</h1>; } export default Header;
App.js
import React from 'react'; import Header from './Header'; import './App.css'; export default function App() { return ( <div className="app-container"> <Header /> <p className="app-paragraph">This app has a header component.</p> </div> ); }
App.test.js
import { render } from '@testing-library/react'; import findRenderedDOMComponentWithClass from 'path-to-findRenderedDOMComponentWithClass'; import App from './App'; test('finds a header with a specific class', () => { const { container } = render(<App />); const foundElement = findRenderedDOMComponentWithClass(container, 'header-title'); });
输出

示例 - 带有动态内容的 React 应用
应用说明 - 这就像一个可以显示不同消息的网页。它有点像可以显示变化信息的告示牌。
测试说明 - 我们要确保变化的消息存在。因此,我们使用一个工具来查找该部分并检查它是否显示了正确的消息。
DynamicContent.js
import React from 'react'; function DynamicContent({ content }) { return <div className="dynamic-content">{content}</div>; } export default DynamicContent;
App.js
import React from 'react'; import DynamicContent from './DynamicContent'; import './App.css'; function App() { return ( <div className="app-container App"> <DynamicContent content="This content is dynamic!" /> <p className="app-paragraph">This app includes dynamic content.</p> </div> ); }
App.test.js
import { render } from '@testing-library/react'; import findRenderedDOMComponentWithClass from 'path-to-findRenderedDOMComponentWithClass'; import App from './App'; test('finds a dynamic content with a specific class', () => { const { container } = render(<App />); const foundElement = findRenderedDOMComponentWithClass(container, 'dynamic-content'); });
输出

总结
此函数用于测试 React 组件。当我们运行测试时,它帮助我们在 React 组件的最终结果中找到一个特定元素。假设我们有一张一群人的照片,我们想找到戴红帽的人,我们将使用此函数在照片中找到这个人。它是测试的有用工具,可以确保我们的组件按预期工作。