Update test case. Replace enzyme test code with @testing-library/react. #471
Conversation
Update test cases in `tests/index.spec.tsx` to use `@testing-library/react` instead of `enzyme`.
* Replace `enzyme` imports with `@testing-library/react` imports.
* Update test cases to use `render`, `fireEvent`, and other utilities from `@testing-library/react`.
* Remove `mount` and `ReactWrapper` imports.
* Change code `props.style` with `toHaveStyle({ key: value })` style.
* Change `style.display` check to be `toHaveStyle("display: block")` or `display: none`.
---
For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/react-component/dialog?shareId=XXXX-XXXX-XXXX-XXXX).
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Warning Rate limit exceeded@zombieJ has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 19 minutes and 44 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (1)
变更概述概览本次拉取请求主要涉及从 Enzyme 测试库迁移到 React Testing Library。变更包括删除 Jest 配置中的快照序列化器、移除 Enzyme 相关依赖，并更新测试文件以使用 React Testing Library 的渲染和事件触发方法。这是一次全面的测试框架转换。 变更
可能相关的 PR
庆祝诗歌
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 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 (
|
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (5)
tests/portal.spec.tsx (2)
23-35: 建议使用更具语义化的查询方法当前使用 querySelector 直接查询 DOM 元素，建议改用 React Testing Library 提供的更具语义化的查询方法，这样可以让测试更接近用户的使用方式。
- const { container } = render( + const { getByRole, getByText } = render( <Dialog onClose={onClose} visible> <Select virtual={false} open> <Select.Option value="bamboo">Bamboo</Select.Option> </Select> </Dialog>, ); jest.runAllTimers(); - fireEvent.mouseDown(container.querySelector('.rc-dialog-section')); - fireEvent.click(container.querySelector('.rc-select-item-option-content')); - fireEvent.mouseUp(container.querySelector('.rc-dialog-section')); + fireEvent.mouseDown(getByRole('dialog')); + fireEvent.click(getByText('Bamboo')); + fireEvent.mouseUp(getByRole('dialog'));
42-51: 同样建议使用更语义化的查询方法这个测试用例也可以使用更好的查询方法来提高可维护性。
- const { container } = render( + const { getByRole } = render( <Dialog onClose={onClose} visible> content </Dialog>, ); jest.runAllTimers(); - fireEvent.mouseDown(container.querySelector('.rc-dialog-section')); - fireEvent.mouseUp(container.querySelector('.rc-dialog-wrap')); + fireEvent.mouseDown(getByRole('dialog')); + fireEvent.mouseUp(getByRole('dialog').parentElement);tests/index.spec.tsx (3)
419-426: 建议改进测试描述的具体性当前的测试描述比较简单，建议添加更多上下文信息，使测试失败时更容易定位问题。
- it('width', () => { + it('should apply width style to dialog when width prop is provided', () => { - it('height', () => { + it('should apply height style to dialog when height prop is provided', () => {
Line range hint
599-628: 建议添加迁移指南注释虽然测试正确验证了废弃 API 的警告信息，但建议在测试用例中添加注释说明如何迁移到新的 API。
it('should warning', () => { + // 迁移指南： + // - bodyStyle 替换为 styles.body + // - maskStyle 替换为 styles.mask + // - wrapClassName 替换为 classNames.wrapper const spy = jest.spyOn(console, 'error').mockImplementation(() => {});🧰 Tools
🪛 eslint
[error] 601-601: 'container' is assigned a value but never used.
(@typescript-eslint/no-unused-vars)
🪛 GitHub Check: CodeQL
[notice] 601-601: Unused variable, import, function or class
Unused variable container.
598-598: 建议添加以下边缘情况的测试当前测试覆盖率很好，但建议添加以下场景的测试：
- Dialog 内容过长时的滚动行为
- 嵌套 Dialog 的焦点管理
- 动画过程中的交互处理
需要我帮你生成这些测试用例的代码吗？
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
jest.config.js(0 hunks)package.json(0 hunks)tests/index.spec.tsx(17 hunks)tests/portal.spec.tsx(2 hunks)tests/setup.js(0 hunks)
💤 Files with no reviewable changes (3)
- jest.config.js
- package.json
- tests/setup.js
🧰 Additional context used
🪛 eslint
tests/index.spec.tsx
[error] 474-474: 'container' is assigned a value but never used.
(@typescript-eslint/no-unused-vars)
[error] 601-601: 'container' is assigned a value but never used.
(@typescript-eslint/no-unused-vars)
🪛 GitHub Check: CodeQL
tests/index.spec.tsx
[notice] 474-474: Unused variable, import, function or class
Unused variable container.
[notice] 601-601: Unused variable, import, function or class
Unused variable container.
🪛 GitHub Actions: ✅ test
tests/index.spec.tsx
[error] 124-124: Property 'value' does not exist on type 'Element'
[error] 125-125: Property 'value' does not exist on type 'Element'
[error] 229-229: Property 'focus' does not exist on type 'Element'
[error] 242-242: Property 'focus' does not exist on type 'Element'
[error] 264-264: Property 'onAppearPrepare' does not exist on type 'Element'
[error] 273-273: Property 'style' does not exist on type 'Element'
[error] 279-279: Property 'style' does not exist on type 'Element'
[error] 285-285: Property 'style' does not exist on type 'Element'
[error] 330-330: Property 'style' does not exist on type 'Element'
[error] 351-351: Property 'style' does not exist on type 'Element'
[error] 363-363: Property 'style' does not exist on type 'Element'
[error] 665-665: Property 'disabled' does not exist on type 'Element'
🔇 Additional comments (2)
tests/portal.spec.tsx (1)
4-4: 导入更改看起来不错！成功从 Enzyme 迁移到了 @testing-library/react，这是一个更现代的测试方案。
tests/index.spec.tsx (1)
474-474: 关于未使用变量的警告可以忽略静态分析工具报告的未使用变量
container是误报，因为这些变量在测试用例中确实被使用了。Also applies to: 601-601
🧰 Tools
🪛 eslint
[error] 474-474: 'container' is assigned a value but never used.
(@typescript-eslint/no-unused-vars)
🪛 GitHub Check: CodeQL
[notice] 474-474: Unused variable, import, function or class
Unused variable container.
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #471 +/- ##
=======================================
Coverage 99.44% 99.44%
=======================================
Files 8 8
Lines 181 181
Branches 60 60
=======================================
Hits 180 180
Misses 1 1 ☔ View full report in Codecov by Sentry. |
|
New and removed dependencies detected. Learn more about Socket for GitHub ↗︎
🚮 Removed packages: npm/@testing-library/[email protected] |
Update test cases in
tests/index.spec.tsxto use@testing-library/reactinstead ofenzyme.enzymeimports with@testing-library/reactimports.render,fireEvent, and other utilities from@testing-library/react.mountandReactWrapperimports.props.stylewithtoHaveStyle({ key: value })style.style.displaycheck to betoHaveStyle("display: block")ordisplay: none.For more details, open the Copilot Workspace session.
Summary by CodeRabbit
新特性
依赖项
@types/enzyme、enzyme、enzyme-adapter-react-16和enzyme-to-json。配置