test: Move enzyme to testing lib #1241
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough本次 PR 移除 package.json 中与 Enzyme 相关的开发依赖，并对多个测试文件进行了重构。所有测试文件均将 Enzyme 的 Changes
Possibly related PRs
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
tests/FixedColumn.spec.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct. The config "prettier" was referenced from the config file in "/.eslintrc.js". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🧰 Additional context used🪛 GitHub Check: codecov/patchtests/FixedColumn.spec.tsx[warning] 88-89: tests/FixedColumn.spec.tsx#L88-L89 🔇 Additional comments (7)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (4)
tests/classComponent.spec.tsx (1)
6-8: 类组件测试恢复和类型定义改进测试不再被跳过（从
xit改为it），并且添加了正确的 TypeScript 类型定义<{}, { count: number }>。针对静态分析工具的建议，可以更好地定义空 props 类型：
-class Demo extends React.Component<{}, { count: number }> { +class Demo extends React.Component<Record<string, never>, { count: number }> {或者如果这个组件需要支持子组件，可以使用：
-class Demo extends React.Component<{}, { count: number }> { +class Demo extends React.Component<React.PropsWithChildren<Record<string, never>>, { count: number }> {🧰 Tools
🪛 Biome (1.9.4)
[error] 7-7: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
tests/Summary.spec.tsx (1)
58-84: 摘要行点击事件测试需改进摘要行点击事件测试已迁移，但空值检查可以改进。
建议使用断言替代条件判断，这样当元素不存在时测试会更明确地失败：
- const tr = container.querySelector('tfoot tr'); - if (tr) { - fireEvent.click(tr); - } + const tr = container.querySelector('tfoot tr'); + expect(tr).toBeTruthy(); + fireEvent.click(tr!);tests/ExpandRow.spec.jsx (1)
136-140: 使用可选链优化代码此代码段可以使用可选链运算符来简化条件检查。
- const resizeObserver = container.querySelector('ResizeObserver'); - if (resizeObserver && resizeObserver.onResize) { - resizeObserver.onResize({ width: 1128 }); - } + const resizeObserver = container.querySelector('ResizeObserver'); + resizeObserver?.onResize?.({ width: 1128 });🧰 Tools
🪛 Biome (1.9.4)
[error] 137-138: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
tests/FixedColumn.spec.tsx (1)
134-148: 使用可选链进行安全访问对
tableContent进行了适当的空检查，但可以使用可选链运算符使代码更简洁。act(() => { - if (tableContent) { - Object.defineProperty(tableContent, 'scrollLeft', { value: 10, writable: true }); - Object.defineProperty(tableContent, 'scrollWidth', { value: 200, writable: true }); - Object.defineProperty(tableContent, 'clientWidth', { value: 100, writable: true }); - fireEvent.scroll(tableContent); - } + if (!tableContent) return; + + Object.defineProperty(tableContent, 'scrollLeft', { value: 10, writable: true }); + Object.defineProperty(tableContent, 'scrollWidth', { value: 200, writable: true }); + Object.defineProperty(tableContent, 'clientWidth', { value: 100, writable: true }); + fireEvent.scroll(tableContent); });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (4)
tests/__snapshots__/ExpandRow.spec.jsx.snapis excluded by!**/*.snaptests/__snapshots__/FixedColumn.spec.tsx.snapis excluded by!**/*.snaptests/__snapshots__/Summary.spec.tsx.snapis excluded by!**/*.snaptests/__snapshots__/Table.spec.jsx.snapis excluded by!**/*.snap
📒 Files selected for processing (18)
package.json(0 hunks)tests/Cell.spec.tsx(6 hunks)tests/Colgroup.spec.jsx(4 hunks)tests/Deprecated.spec.jsx(3 hunks)tests/ExpandRow.spec.jsx(33 hunks)tests/FixedColumn-IE.spec.jsx(2 hunks)tests/FixedColumn.spec.tsx(7 hunks)tests/FixedHeader.spec.jsx(6 hunks)tests/GroupingColumns.spec.jsx(6 hunks)tests/Hover.spec.tsx(9 hunks)tests/Internal.spec.jsx(2 hunks)tests/Scroll.spec.jsx(6 hunks)tests/Sticky.spec.jsx(9 hunks)tests/Summary.spec.tsx(6 hunks)tests/Table.spec.jsx(41 hunks)tests/classComponent.spec.tsx(2 hunks)tests/setup.ts(0 hunks)tests/utils.js(1 hunks)
💤 Files with no reviewable changes (2)
- tests/setup.ts
- package.json
🧰 Additional context used
🪛 Biome (1.9.4)
tests/classComponent.spec.tsx
[error] 7-7: Don't use '{}' as a type.
Prefer explicitly define the object shape. '{}' means "any non-nullable value".
(lint/complexity/noBannedTypes)
tests/ExpandRow.spec.jsx
[error] 137-138: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🪛 GitHub Actions: ✅ test
tests/FixedColumn.spec.tsx
[error] 268-268: error TS2345: Argument of type 'Element' is not assignable to parameter of type 'HTMLElement'. Type 'Element' is missing the following properties from type 'HTMLElement': accessKey, accessKeyLabel, autocapitalize, dir, and 126 more.
🔇 Additional comments (183)
tests/utils.js (1)
1-8: 函数简化并从 Enzyme 迁移到 React Testing Library！这个改动符合 PR 的目标，即将测试从 Enzyme 迁移到 React Testing Library。
safeAct函数已经简化，移除了wrapper和cb参数，这符合 React Testing Library 的测试方法，它更关注用户交互而非组件内部。需要注意的是，由于函数签名发生了变化，调用此函数的其他代码也需要相应更新。
tests/FixedColumn-IE.spec.jsx (4)
2-7: 正确导入 React Testing Library 的功能从 Enzyme 的
mount切换到 React Testing Library 的render和act，同时保留了必要的测试工具导入。
45-45: 成功从 Enzyme 迁移到 React Testing Library使用
render替代mount并解构出container，这符合 React Testing Library 的使用模式。
47-51: 中文注释增加了代码可读性添加了解释性的中文注释，说明了这段代码的目的，有助于其他开发者理解测试逻辑。
53-54: 测试断言正确更新从 Enzyme 的
wrapper.exists变更为 React Testing Library 的container.querySelector并将断言从toBeFalsy()更改为检查null，这符合 React Testing Library 的测试方法。tests/Internal.spec.jsx (2)
1-1: 正确导入 React Testing Library从 Enzyme 切换到了 React Testing Library，导入了需要的
render方法。
9-20: 成功从 Enzyme 的 mount 迁移到 React Testing Library 的 render使用
render替代mount并解构出container，这符合 React Testing Library 的使用模式。tests/Deprecated.spec.jsx (3)
2-3: 正确更新导入从 Enzyme 切换到了 React Testing Library，同时更新了
resetWarned的导入路径。
27-27: 成功从 Enzyme 迁移到 React Testing Library使用
render替代mount，这符合 PR 的迁移目标。
39-41: 成功迁移测试断言使用 React Testing Library 的
render替代 Enzyme 的mount，保持了原有的断言逻辑，确保警告信息包含已移除的属性名。tests/Hover.spec.tsx (11)
1-1: 正确引入了 React Testing Library从 Enzyme 切换到 React Testing Library，使用了正确的导入语句。
20-23: 成功使用了 React Testing Library 替换 Enzyme恰当地使用了
render函数替代mount，并使用container.querySelectorAll和fireEvent.mouseEnter替代了 Enzyme 的find和simulate方法。断言也正确地更新为使用container.querySelector。
25-26: mouseLeave 事件模拟实现正确使用
fireEvent.mouseLeave替代 Enzyme 的simulate('mouseLeave')方法，保持了测试逻辑的一致性。
30-39: shouldCellUpdate 测试顺利迁移成功将测试用例从 Enzyme 迁移到 React Testing Library，同时保持了测试的原始意图和逻辑。
40-41: 鼠标离开事件测试正确实现测试逻辑清晰，使用
fireEvent.mouseLeave和恰当的断言验证功能。
48-71: 警告测试迁移完成成功迁移了关于行合并的警告测试，从 Enzyme 到 React Testing Library 的转换保留了测试的原始意图。
72-87: 合并单元格测试正确实现正确实现了合并单元格的测试，使用了 React Testing Library 的查询方法和事件触发函数，逻辑清晰。
94-129: onCell 测试迁移完成成功将 onCell 功能测试从 Enzyme 迁移到 React Testing Library，同时保持了测试的一致性和有效性。
131-170: legacy 模式性能测试迁移完成成功迁移了性能测试，确保在每次鼠标事件发生时都会触发渲染。测试逻辑没有变化，只是更新了测试库的调用方式。
172-208: 性能模式测试迁移完成成功迁移了性能模式测试，验证了优化后的渲染行为。测试逻辑保持不变，只是改变了测试库的使用方式。
211-243: 组件渲染测试迁移完成成功迁移了自定义渲染组件的测试，确保渲染次数符合预期。测试逻辑保持不变，只是更新了测试库的使用方式。
tests/classComponent.spec.tsx (3)
2-2: 正确引入了 React Testing Library从 Enzyme 切换到 React Testing Library，使用了正确的导入语句。
32-36: 成功使用 React Testing Library 方法恰当地使用了
render函数和getByRole方法来查找按钮，同时使用了textContent属性验证内容。
37-40: 点击事件和状态更新测试实现正确使用
fireEvent.click替代 Enzyme 的simulate('click')方法，并正确验证了状态更新。tests/GroupingColumns.spec.jsx (5)
1-1: 正确引入了 React Testing Library从 Enzyme 切换到 React Testing Library，使用了正确的导入语句，包括
act和fireEvent。
59-81: 表格分组列测试迁移完成成功迁移了分组列测试，恰当地使用了
container.querySelector替代 Enzyme 的find方法，并使用getAttribute获取属性值。
123-126: issues/4061 测试用例迁移完成正确迁移了针对 GitHub issue #4061 的测试用例，确保了行合并功能的正确性。
154-157: 奇怪布局测试迁移完成成功迁移了特殊布局测试，并正确验证了
rowspan属性值。
186-194: 隐藏列测试迁移完成成功迁移了隐藏列测试，使用了
container.querySelectorAll和链式查询正确地获取和验证元素内容。tests/Summary.spec.tsx (8)
1-1: 正确引入了 React Testing Library从 Enzyme 切换到 React Testing Library，使用了正确的导入语句。
17-28: 表格摘要行测试迁移完成成功迁移了表格摘要行渲染测试，使用了
container.querySelector替代 Enzyme 的find方法，并正确使用可选链操作符检查元素存在性。
31-54: 数据类型支持测试迁移完成成功迁移了数据类型支持测试，保持了快照测试逻辑。
89-109: 固定摘要表格函数迁移完成成功迁移了获取固定摘要表格的函数，使用了 React Testing Library 的
render方法。
111-114: 固定摘要测试迁移完成成功迁移了固定摘要测试，使用了
container.querySelector替代 Enzyme 的find方法。
117-120: 底部固定摘要测试迁移完成成功迁移了底部固定摘要测试，测试逻辑保持一致。
123-126: 粘性摘要测试迁移完成成功迁移了粘性摘要测试，验证了正确的 CSS 类。
129-131: 顶部固定摘要测试迁移完成成功迁移了顶部固定摘要测试，使用了复合选择器正确地查找元素。
tests/Sticky.spec.jsx (23)
1-1: 导入React Testing Library的相关函数代码从Enzyme测试库转换为React Testing Library，这里导入了必要的
render、fireEvent和createEvent函数，这些都是React Testing Library的核心API。
4-4: 直接导入React Testing Library的act函数从React Testing Library直接导入
act函数，替代了之前从自定义utils导入的safeAct。这是一个很好的简化，减少了额外的抽象层。
32-36: 使用React Testing Library的render方法和查询DOM将Enzyme的
mount替换为React Testing Library的render方法，并使用解构获取container和rerender。这符合React Testing Library的最佳实践，更关注用户实际交互的方式。
34-42: 更新DOM查询和样式断言使用
container.querySelectorAll替代了Enzyme的find方法，并直接检查DOM元素的style属性。这种方式更接近实际用户体验，使测试更可靠。
44-47: 使用React Testing Library的act函数使用React Testing Library的
act函数包装异步操作，确保组件更新完全应用后再进行断言，这是处理副作用的正确方式。
48-55: 更新DOM元素查询和样式断言代码继续使用
container.querySelectorAll查询更新后的DOM元素，并检查它们的样式。这种方法更符合实际用户交互模式。
87-121: 使用React Testing Library渲染表格将Enzyme的
mount替换为React Testing Library的render方法，这种转换保持了测试的功能，同时使测试更加符合实际用户交互方式。
128-128: 使用container查询DOM元素使用
container.querySelector替代Enzyme的find方法来查找DOM元素，这使得测试更加直观和可靠。
141-141: 使用container查询DOM元素进行断言继续使用
container.querySelector查找DOM元素并进行存在性检查，符合React Testing Library的测试风格。
151-159: 使用createEvent和fireEvent模拟鼠标事件使用React Testing Library的
createEvent和fireEvent函数替代Enzyme的事件模拟，这更接近真实的用户交互方式。
170-175: 更新样式断言使用新的方法代码使用
expect.objectContaining方法检查样式对象，这更灵活且可读性更好。
184-189: 使用一致的样式断言方法继续使用
expect.objectContaining检查样式对象，保持了测试风格的一致性。
198-198: 检查元素类名存在性使用
container.querySelector替代Enzyme的选择器方法，简化了测试代码。
236-249: 使用React Testing Library的render方法将Enzyme的
mount替换为React Testing Library的render方法，保持测试的一致性。
243-248: 更新样式断言使用新的方法继续使用
expect.objectContaining检查样式属性，使断言更清晰和灵活。
283-286: 继续使用React Testing Library的render方法保持使用
render方法和await act组合来处理异步更新，确保测试的可靠性。
287-295: 使用同样的查询和断言模式保持一致的DOM查询和样式断言模式，使测试代码更易于维护。
304-306: 处理DOM元素创建使用更现代的方式创建并配置DOM元素，使代码更清晰。
354-394: 使用React Testing Library渲染并查询将复杂组件的渲染从Enzyme切换到React Testing Library，保持测试逻辑的一致性。
399-400: 直接从容器元素查询DOM从特定容器元素查询DOM节点，而不是使用Enzyme的包装器，这更接近实际DOM操作。
408-413: 使用React Testing Library的事件相关函数使用
createEvent创建鼠标事件并使用fireEvent触发，替代了Enzyme的事件模拟方法。
414-426: 使用新的事件模拟方式使用更现代的方式定义和触发鼠标事件，并进行相应的样式断言。
428-428: 使用组件卸载方法使用React Testing Library的
unmount方法替代Enzyme的相应功能，确保测试资源正确释放。tests/Scroll.spec.jsx (16)
1-1: 导入React Testing Library的相关函数从React Testing Library导入
render和fireEvent函数，替代之前使用的Enzyme函数，这是向更现代测试库迁移的第一步。
4-4: 导入React Testing Library的act函数直接从React Testing Library导入
act函数，用于处理组件渲染后的异步状态更新。
24-24: 使用React Testing Library的render方法将Enzyme的
mount替换为React Testing Library的render方法，并解构出container变量。
26-26: 使用querySelector替代find方法使用
container.querySelector替代Enzyme的find方法来查询DOM元素，这更接近原生DOM API。
30-35: 使用React Testing Library渲染和查询继续使用
render方法和container.querySelector，保持一致的测试风格。
39-42: 样式断言更新对表格和内容元素的样式直接进行断言，而不是通过Enzyme的props方法。
45-47: 数字样式值断言使用
container.querySelector获取元素并直接断言其样式属性，注意值现在包含单位（如'200px'）。
51-55: 处理滚动样式断言继续使用一致的DOM查询和样式断言模式。
96-105: 使用React Testing Library渲染表格将复杂表格组件的渲染从Enzyme切换到React Testing Library。
107-109: 使用act包装状态更新使用
act函数包装定时器运行，确保组件状态更新完成后再进行断言。
113-114: 使用container查询DOM元素使用
container.querySelector获取header元素，而不是通过Enzyme的包装器。
128-129: 使用container获取body元素使用
container.querySelector获取表格body元素进行后续操作。
130-139: 使用Object.defineProperty定义属性直接在DOM元素上使用
Object.defineProperty定义scrollLeft、scrollWidth和clientWidth属性，而不是通过Enzyme的模拟。
140-141: 使用fireEvent触发滚动事件使用React Testing Library的
fireEvent.scroll触发scroll事件，替代Enzyme的事件模拟。
143-145: 使用act确保状态更新将定时器运行包装在
act中，确保组件状态更新完成。
164-164: 使用React Testing Library的render方法继续使用
render方法替代Enzyme的mount，保持测试风格一致性。tests/Table.spec.jsx (77)
1-1: 导入React Testing Library的相关函数从React Testing Library导入
render和fireEvent函数，替代之前使用的Enzyme函数，符合PR的整体目标。
4-4: 导入React Testing Library的act函数直接从React Testing Library导入
act函数，用于处理异步状态更新。
22-28: 使用React Testing Library的render方法使用
render方法替代Enzyme的mount，并解构出container变量用于后续查询。
28-28: 使用container.firstChild进行快照测试使用
container.firstChild替代Enzyme的wrapper.render()进行快照测试。
32-39: 保持一致的测试风格继续使用相同的模式渲染组件并进行快照测试。
43-44: 无列渲染测试使用React Testing Library的API测试无列的表格渲染。
48-68: 测试列子元素为undefined的情况使用React Testing Library渲染并检查DOM元素内容。
72-85: 测试falsy列继续使用一致的测试模式检查falsy列的渲染。
91-92: 测试ReactNode空文本使用
container.querySelector查找并检查占位符文本。
96-97: 测试renderProps空文本与上面相同的测试模式，检查函数返回的空文本。
108-110: 测试effect更新使用React Testing Library的
render和rerender方法测试effect更新。
115-116: 测试无表头渲染使用
querySelector检查thead元素是否存在。
120-121: 测试固定表头检查固定表头元素是否正确渲染。
125-126: 测试标题渲染检查表格标题元素的内容。
130-131: 测试页脚渲染检查表格页脚元素的内容。
136-137: 测试ID渲染使用
querySelector检查带有特定ID的div元素是否存在。
142-144: 测试data-属性检查表格div元素是否具有正确的data-test属性。
149-151: 测试aria-属性检查表格元素是否具有正确的aria-label属性。
156-159: 测试rowKey使用record.key检查行元素的data-row-key属性是否正确设置。
163-166: 测试通过rowKey设置key检查使用name属性作为rowKey时行元素的data-row-key属性。
170-173: 测试通过rowKey函数设置key检查使用函数返回值作为rowKey时行元素的data-row-key属性。
180-181: 测试字符串标题检查表格标题元素是否存在。
186-187: 测试React.Node标题检查嵌套的标题元素是否存在。
192-193: 测试无标题检查没有标题时标题元素是否不存在。
198-203: 测试tableLayout检查表格元素的tableLayout样式和类名是否正确设置。
207-217: 测试省略号检查单元格是否包含正确的省略号类名。
221-231: 测试通过showTitle选项设置省略号检查使用showTitle选项时单元格是否包含正确的省略号类名。
239-245: 测试不渲染省略号原始html标题检查表头和表体单元格的title属性是否正确设置。
250-268: 测试列scope正确渲染检查表头单元格的scope属性是否正确设置。
271-289: 测试行scope正确渲染检查表体th元素的scope属性是否正确设置。
303-309: 测试列正确渲染检查单元格的类名、内容和列宽是否正确设置。
320-323: 测试自定义单元格正确渲染检查自定义渲染的单元格内容是否正确。
338-338: 测试falsy数据索引使用React Testing Library的render方法而不提取容器，因为这里只需要触发渲染。
352-362: 测试通过路径渲染文本检查使用嵌套数据路径时单元格内容是否正确。
370-371: 测试空对象文本渲染为空单元格检查空对象数据时单元格内容是否为空。
413-414: 测试colSpan正确渲染使用React Testing Library渲染并进行快照测试。
431-435: 测试使用style和className渲染检查单元格的样式、类名和自定义数据属性是否正确设置。
467-468: 测试rowSpan正确渲染使用React Testing Library渲染并进行快照测试。
474-474: 测试无rowKey警告使用React Testing Library渲染组件测试警告。
482-490: 测试字符串rowClassName检查表体行是否包含正确的类名。
494-502: 测试函数rowClassName检查使用函数返回类名时表体行是否包含正确的类名。
511-515: 测试onRow正确渲染检查行元素的ID属性是否正确设置并模拟点击事件。
535-540: 测试onRow保持更新使用React Testing Library的
getByText和fireEvent.click测试状态更新。
549-554: 测试column.onCell正确渲染检查单元格元素的ID属性是否正确设置。
561-563: 测试onHeaderRow正确渲染检查表头行元素的ID属性是否正确设置。
575-577: 测试column.onHeaderCell检查表头单元格元素的ID属性是否正确设置。
603-604: 测试自定义组件使用React Testing Library渲染自定义组件并进行快照测试。
614-622: 测试固定列和表头使用React Testing Library渲染带有固定列和表头的表格并进行快照测试。
629-638: 测试滚动内容使用React Testing Library渲染带有滚动内容的表格并进行快照测试。
650-658: 测试没有警告 - 列为空使用React Testing Library渲染列为空的表格测试警告。
669-677: 测试不崩溃使用React Testing Library渲染带有循环引用组件的表格测试不崩溃。
686-692: 测试列对齐检查表头和表体单元格的文本对齐样式是否正确设置。
706-712: 测试列对齐不应覆盖单元格样式检查表头和表体单元格的颜色和文本对齐样式是否正确设置。
716-734: 测试隐藏列检查隐藏列是否正确从DOM中移除。
754-758: 测试行点击事件使用
fireEvent.click模拟行点击事件并检查回调是否被调用。
763-767: 测试行双击事件使用
fireEvent.doubleClick模拟行双击事件并检查回调是否被调用。
772-776: 测试行上下文菜单事件使用
fireEvent.contextMenu模拟行上下文菜单事件并检查回调是否被调用。
781-790: 测试onRowMouseEnter使用
fireEvent.mouseEnter模拟行鼠标进入事件并检查回调是否被调用。
795-804: 测试onRowMouseLeave使用
fireEvent.mouseLeave模拟行鼠标离开事件并检查回调是否被调用。
809-814: 测试没有key的列检查没有key的列是否正确渲染。
819-828: 测试语法糖使用React Testing Library渲染使用Column和ColumnGroup组件的表格并进行快照测试。
834-841: 测试transformColumns内部API使用React Testing Library渲染使用transformColumns的表格并进行快照测试。
847-860: 测试内部columnType使用React Testing Library渲染带有expandable属性的表格并检查内部列类型。
871-877: 测试internalRefs使用React Testing Library渲染带有internalRefs的表格。
885-891: 测试列渲染数组检查渲染数组的列是否正确渲染。
895-904: 测试组件body应传递data-row-key检查自定义行组件是否正确接收data-row-key属性。
931-935: 测试状态更改渲染使用React Testing Library渲染带有状态的组件并检查按钮文本。
940-945: 测试原始数据不崩溃使用React Testing Library渲染带有原始数据的表格测试不崩溃。
988-996: 测试shouldCellUpdate基础用例使用React Testing Library的
render、rerender和fireEvent.click测试shouldCellUpdate功能。
1007-1040: 测试不阻止嵌套子项使用React Testing Library渲染带有嵌套子项的表格并测试展开/折叠功能。
1060-1072: 测试树形表格中的索引渲染使用React Testing Library渲染树形表格并检查单元格内容。
1086-1101: 测试悬停树形表格使用React Testing Library渲染树形表格并模拟鼠标悬停事件。
1116-1136: 测试rowHoverable为false时使用React Testing Library渲染rowHoverable为false的表格并检查悬停效果。
1141-1151: 测试应获取滚动条大小使用React Testing Library渲染带有滚动属性的表格并进行快照测试。
1188-1196: 测试列支持JSX条件使用React Testing Library渲染带有条件列的表格并检查渲染结果。
1309-1316: 测试同时使用列子项和组件body检查列宽度是否正确计算和设置。
1321-1334: 测试onScroll事件使用React Testing Library渲染带有滚动属性的表格并模拟滚动事件。
tests/Colgroup.spec.jsx (9)
2-2: 导入React Testing Library的render函数从React Testing Library导入
render函数替代Enzyme的mount，这是向更现代测试库迁移的一部分。
4-4: 直接导入Cell组件直接从源文件导入Cell组件，简化了导入结构。
14-16: 使用React Testing Library查询DOM使用
render方法和container.querySelector查询DOM元素，替代Enzyme的包装器方法。
20-33: 使用单独的对象定义列将单一列对象拆分为三个独立的列对象，每个都有自己的key和width属性，使代码更清晰。
35-45: 添加ProxyCell组件跟踪卸载次数创建一个新的ProxyCell组件，使用React Hook来跟踪卸载事件，这是一个更现代的实现方式。
47-68: 使用React Testing Library的render和rerender方法使用React Testing Library的API来测试列key的变化如何影响组件的卸载和重新渲染。
69-69: 检查卸载计数验证组件在列改变时正确卸载，确保不会有内存泄漏或多余的渲染。
79-81: 测试minWidth样式使用React Testing Library的
render和container.querySelector检查col元素的minWidth样式属性。
92-94: 测试tableLayout为fixed时不应有minWidth检查当tableLayout为fixed时，col元素的minWidth样式属性应为falsy值。
tests/FixedHeader.spec.jsx (7)
1-2: 导入适当的测试库组件从 Enzyme 迁移到 React Testing Library 是一个很好的现代化测试方法的改进。React Testing Library 鼓励以更接近用户交互方式的测试，这与组件的实现细节耦合较少。
8-13: 异步 triggerResize 函数实现得很好将
triggerResize更新为异步函数并使用act包装回调是处理 React 组件状态变化的正确方法。使用Promise.resolve()确保所有微任务完成也是一个好实践。
21-28: 从 spyElementPrototype 迁移到 spyElementPrototypes良好地迁移到
spyElementPrototypes并添加了offsetWidth模拟，以便于在测试中可以基于visible状态控制宽度。
53-60: 正确使用 act 进行异步更新使用
act包装所有状态更新和计时器运行确保测试同步性，这是当前 React 测试的最佳实践。
62-66: 使用现代 DOM 查询方法使用
container.querySelector和container.querySelectorAll替代 Enzyme 的wrapper.find()是一个良好的模式转变，更接近真实的 DOM 交互方式。
119-126: 显式处理异步行为
act与vi.runAllTimers()和Promise.resolve()一起使用确保了所有异步操作在断言前完成，避免了时间相关的测试不稳定性。
203-206: 简洁的查询和断言使用
container.querySelectorAll并适当检查类名存在是一个干净且可读的测试方法。tests/ExpandRow.spec.jsx (5)
1-2: 导入 React Testing Library 组件从 Enzyme 的
mount迁移到 React Testing Library 的render和fireEvent是一个很好的现代化测试方法的改进。
171-178: 有效使用 render 函数的返回值很好地使用了 React Testing Library 的
render函数返回的container和rerender对象进行第二次组件渲染。
237-240: 使用现代 DOM 查询方法进行断言良好地将 Enzyme 的
wrapper.find()...length方式替换为container.querySelectorAll().length，使代码更直观且与实际 DOM 操作更一致。
268-270: DOM 元素查询与类检查使用 querySelector 进行 DOM 元素查找并检查类名存在与否是直观且符合最佳实践的做法。
531-537: 使用 fireEvent 模拟用户交互从 Enzyme 的
simulate更改为 React Testing Library 的fireEvent.click更好地模拟了真实用户交互。条件检查确保在元素存在时才执行操作，这是良好的实践。tests/FixedColumn.spec.tsx (4)
16-16: 添加明确的类型标注为
domSpy添加明确的 TypeScript 类型标注ReturnType<typeof spyElementPrototypes>是良好的做法，提高了代码的类型安全性和可读性。
83-95: 使用异步/等待模式和 act正确地使用
await triggerResize和包装在act中的异步操作，确保所有状态更新都在断言前完成。
214-224: RTL 模式下的类名检查正确地使用 React Testing Library 的
.toHaveClass()断言来检查 RTL 模式下的表格样式类。
237-240: 使用 container 检查 DOM 结构使用
container.querySelectorAll确认 DOM 结构是直观且易于理解的测试方法。tests/Cell.spec.tsx (5)
1-2: 导入 React Testing Library从 Enzyme 迁移到 React Testing Library 是一个很好的改变，使测试更贴近用户交互方式。
37-42: 使用 getByRole 获取元素使用
getByRole获取按钮元素是一种更符合可访问性和用户交互的方法，比通过选择器查找更可靠。
58-67: 使用 rerender 更新组件从 Enzyme 的
setProps迁移到 React Testing Library 的rerender函数更新组件属性是正确的做法。使用.toHaveClass()断言检查类名存在也符合最佳实践。
99-104: 使用 textContent 检查文本内容用
textContent替换 Enzyme 的text()方法检查文本内容，并使用可选链操作符确保安全访问 DOM 元素，这是良好的实践。
146-150: 类型安全查询与样式检查使用
querySelector<HTMLTableCellElement>进行类型安全的查询并直接检查样式属性是直观且有效的测试方法。
| ); | ||
|
|
||
| expect(wrapper.find('.expand-icon')).toHaveLength(1); | ||
| expect(container.querySelectorAll('.expand-icon')).toBeTruthy(); |
There was a problem hiding this comment.
断言逻辑需要更新
当使用 querySelectorAll 时，即使没有匹配的元素，它也会返回一个空的 NodeList，而空 NodeList 在布尔上下文中是真值（truthy）。这可能会导致测试出现假阳性结果。
建议更改断言以检查返回的 NodeList 的长度是否大于 0。
- expect(container.querySelectorAll('.expand-icon')).toBeTruthy();
+ expect(container.querySelectorAll('.expand-icon').length).toBeGreaterThan(0);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| expect(container.querySelectorAll('.expand-icon')).toBeTruthy(); | |
| expect(container.querySelectorAll('.expand-icon').length).toBeGreaterThan(0); |
| async function triggerResize(ele: HTMLElement) { | ||
| await act(async () => { | ||
| _rs([{ target: ele }] as any); | ||
| await Promise.resolve(); | ||
| }); | ||
| } |
There was a problem hiding this comment.
异步 triggerResize 函数实现
将 triggerResize 更新为异步函数并使用 act 包装状态更新是正确的做法。然而，在第 268 行中存在类型错误。
act(() => {
container.querySelectorAll('.rc-table-measure-row td').forEach(td => {
- triggerResize(td);
+ triggerResize(td as HTMLElement);
});
});Pipeline 失败提示：error TS2345: Argument of type 'Element' is not assignable to parameter of type 'HTMLElement'，需要进行类型断言。
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| async function triggerResize(ele: HTMLElement) { | |
| await act(async () => { | |
| _rs([{ target: ele }] as any); | |
| await Promise.resolve(); | |
| }); | |
| } | |
| act(() => { | |
| container.querySelectorAll('.rc-table-measure-row td').forEach(td => { | |
| triggerResize(td as HTMLElement); | |
| }); | |
| }); |
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #1241 +/- ##
==========================================
+ Coverage 97.77% 98.04% +0.27%
==========================================
Files 76 76
Lines 7454 7469 +15
Branches 1132 1164 +32
==========================================
+ Hits 7288 7323 +35
+ Misses 160 140 -20
Partials 6 6 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Summary by CodeRabbit