ant-design icon indicating copy to clipboard operation
ant-design copied to clipboard

chore(deps-dev): [WIP] bump jest from 29 to 30

Open li-jia-nan opened this issue 10 months ago • 11 comments

中文版模板 / Chinese template

🤔 This is a ...

  • [ ] 🆕 New feature
  • [ ] 🐞 Bug fix
  • [ ] 📝 Site / documentation improvement
  • [ ] 📽️ Demo improvement
  • [ ] 💄 Component style improvement
  • [ ] 🤖 TypeScript definition improvement
  • [ ] 📦 Bundle size optimization
  • [ ] ⚡️ Performance optimization
  • [ ] ⭐️ Feature enhancement
  • [ ] 🌐 Internationalization
  • [ ] 🛠 Refactoring
  • [ ] 🎨 Code style optimization
  • [x] ✅ Test Case
  • [ ] 🔀 Branch merge
  • [ ] ⏩ Workflow
  • [ ] ⌨️ Accessibility improvement
  • [ ] ❓ Other (about what?)

🔗 Related Issues

  • Describe the source of related requirements, such as links to relevant issue discussions.
  • For example: close #xxxx, fix #xxxx

💡 Background and Solution

  • The specific problem to be addressed.
  • List the final API implementation and usage if needed.
  • If there are UI/interaction changes, consider providing screenshots or GIFs.

📝 Change Log

  • Read Keep a Changelog! Track your changes, like a cat tracks a laser pointer.
  • Describe the impact of the changes on developers, not the solution approach.
  • Reference: https://ant.design/changelog
Language Changelog
🇺🇸 English chore(deps-dev): bump jest from 29 to 30
🇨🇳 Chinese chore(deps-dev): bump jest from 29 to 30

li-jia-nan avatar Jun 10 '25 12:06 li-jia-nan

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

📝 Walkthrough

Summary by CodeRabbit

  • 样式

    • 各组件和测试用例中的颜色值由命名色(如'red'、'blue'等)统一替换为对应的十六进制或RGB色值,提升了样式一致性和可维护性。
  • 测试

    • 测试断言方式优化,改用更直观的Jest DOM断言(如toHaveStyle、toHaveClass)。
    • 事件模拟与元素查询方式更简洁,类型安全性提升。
    • 无影响功能或逻辑的变更,仅提升测试代码质量。
  • 依赖升级

    • Jest相关依赖包版本升级,增强测试环境稳定性。

Summary by CodeRabbit

  • 样式
    • 测试用例中的颜色值由命名色(如 red、blue、yellow 等)统一替换为对应的十六进制或 RGB 颜色代码,提升样式断言的准确性和一致性。
    • 断言方式由直接访问 DOM 属性转为使用 Jest DOM 的断言方法(如 toHaveStyle、toHaveClass),增强可读性和类型安全。
  • 测试
    • 部分测试辅助函数和事件创建逻辑优化,提升代码简洁度和类型安全,无影响实际测试逻辑。
    • 增加全局 ResizeObserver mock,优化测试环境。
  • 依赖升级
    • Jest 相关依赖版本升级,确保测试环境的最新兼容性。

Walkthrough

本次更改主要涉及将测试代码中的颜色值由命名颜色统一替换为十六进制或 RGB 颜色代码,提升了样式断言的准确性和一致性。同时,部分测试工具函数和事件创建方式进行了简化,提升了类型安全性和代码可读性。此外,还对部分依赖包进行了版本升级。

Changes

文件/分组 变更摘要
package.json 升级了 jest-environment-jsdom、jest-environment-node 和 jest-image-snapshot 的依赖版本。
样式断言与测试代码优化
components/config-provider/__tests__/style.test.tsx, components/collapse/__tests__/index.test.tsx, components/date-picker/__tests__/DatePicker.test.tsx, components/date-picker/__tests__/RangePicker.test.tsx, components/date-picker/__tests__/semantic.test.tsx, components/descriptions/__tests__/index.test.tsx, components/input/__tests__/index.test.tsx, components/list/__tests__/Item.test.tsx, components/slider/__tests__/index.test.tsx, components/tooltip/__tests__/tooltip.test.tsx, components/transfer/__tests__/index.test.tsx, components/avatar/__tests__/Avatar.test.tsx, components/badge/__tests__/index.test.tsx, components/grid/__tests__/gap.test.tsx, components/popover/demo/arrow-point-at-center.tsx, components/upload/__tests__/upload.test.tsx, components/_util/__tests__/wave.test.tsx
测试代码中的颜色值由命名颜色(如 red、blue 等)统一更换为十六进制或 RGB 代码,断言方式改为使用 Jest DOM 的 toHaveStyle 和 toHaveClass,提升了样式断言的准确性和一致性。部分类型断言方式、变量解构和样式对象定义做了优化。新增全局 ResizeObserver mock。
事件创建与辅助函数优化
components/splitter/__tests__/index.test.tsx, components/splitter/__tests__/lazy.test.tsx, components/modal/__tests__/Modal.test.tsx
测试辅助函数从声明式函数改为箭头函数,事件创建时直接在 createEvent 中传入 pageX/pageY,提升了代码简洁性和类型安全。
components/typography/Base/Ellipsis.tsx import 语句后增加了空行,无功能性更改。

Sequence Diagram(s)

sequenceDiagram
  participant 测试用例
  participant 组件
  participant DOM
  participant Jest断言

  测试用例->>组件: 渲染带有样式的组件
  组件->>DOM: 应用样式(十六进制/RGB 颜色)
  测试用例->>DOM: 查询目标元素
  测试用例->>Jest断言: 使用 toHaveStyle 断言样式
  Jest断言-->>测试用例: 返回断言结果

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Suggested reviewers

  • li-jia-nan

Poem

兔子敲键盘,颜色换新颜,
红蓝变代码,十六进制闪。
测试更严谨,样式更明晰,
依赖也升级,代码更整齐。
小兔欢跳跃,代码又进阶!
🐰✨

[!NOTE]

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.


📜 Recent review details

Configuration used: CodeRabbit UI Review profile: CHILL Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d41e0bb94588bc2cb17aa2deac3f3472cda46916 and 00ae336b1dc134ec4330450274c63689a8096c62.

⛔ Files ignored due to path filters (7)
  • components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap is excluded by !**/*.snap
  • components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap is excluded by !**/*.snap
  • components/form/__tests__/__snapshots__/demo-extend.test.ts.snap is excluded by !**/*.snap
  • components/input/__tests__/__snapshots__/demo-extend.test.ts.snap is excluded by !**/*.snap
  • components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap is excluded by !**/*.snap
  • components/space/__tests__/__snapshots__/demo-extend.test.ts.snap is excluded by !**/*.snap
  • components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap is excluded by !**/*.snap
📒 Files selected for processing (1)
  • package.json (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • package.json
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (19)
  • GitHub Check: visual-diff snapshot (2/2)
  • GitHub Check: visual-diff snapshot (1/2)
  • GitHub Check: build preview
  • GitHub Check: build
  • GitHub Check: test-react-latest (dom, 1/2)
  • GitHub Check: test-react-latest (dom, 2/2)
  • GitHub Check: test lib/es module (es, 2/2)
  • GitHub Check: test lib/es module (es, 1/2)
  • GitHub Check: test-react-legacy (17, 2/2)
  • GitHub Check: test-react-legacy (17, 1/2)
  • GitHub Check: test-react-legacy (16, 1/2)
  • GitHub Check: test-react-legacy (16, 2/2)
  • GitHub Check: lint
  • GitHub Check: build
  • GitHub Check: size
  • GitHub Check: WIP
  • GitHub Check: build
  • GitHub Check: Analyze (javascript)
  • GitHub Check: Cloudflare Pages
✨ Finishing Touches
🧪 Generate unit tests
  • [ ] Create PR with unit tests
  • [ ] Post copyable unit tests in a comment
  • [ ] Commit unit tests in branch up-jest-version

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai generate unit tests to generate unit tests for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

coderabbitai[bot] avatar Jun 10 '25 12:06 coderabbitai[bot]

Preview is ready

github-actions[bot] avatar Jun 10 '25 12:06 github-actions[bot]

👁 Visual Regression Report for PR #54043 Passed ✅

🎯 Target branch: master (be8b735b4620b40e94d67e965063d6e47229d8a2) 📖 View Full Report ↗︎ 📖 Alternative Report ↗︎

🎊 Congrats! No visual-regression diff found.

github-actions[bot] avatar Jun 10 '25 12:06 github-actions[bot]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff Package Supply Chain
Security
Vulnerability Quality Maintenance License
Updatedjest-environment-jsdom@​29.7.0 ⏵ 30.0.5100 +110060 -396100
Addedreact-countup@​6.5.310010010081100

View full report

socket-security[bot] avatar Jun 10 '25 12:06 socket-security[bot]

size-limit report 📦

Path Size
dist/antd.min.js 444.46 KB
dist/antd-with-locales.min.js 531.57 KB

github-actions[bot] avatar Jun 10 '25 12:06 github-actions[bot]

Bundle Report

Changes will decrease total bundle size by 6.29MB (-65.12%) :arrow_down:. This is within the configured threshold :white_check_mark:

Detailed changes
Bundle name Size Change
antd.min-array-push 3.37MB -6.29MB (-65.12%) :arrow_down:

Affected Assets, Files, and Routes:

view changes for bundle: antd.min-array-push

Assets Changed:

Asset Name Size Change Total Size Change (%)
antd-with-locales.min.js (New) 1.84MB 1.84MB 100.0% :rocket:
antd.min.js (New) 1.53MB 1.53MB 100.0% :rocket:
~~antd-with-locales.js~~ (Deleted) -5.09MB 0 bytes -100.0% :wastebasket:
~~antd.js~~ (Deleted) -4.58MB 0 bytes -100.0% :wastebasket:

codecov[bot] avatar Jun 10 '25 12:06 codecov[bot]

Deploying ant-design with  Cloudflare Pages  Cloudflare Pages

Latest commit: 00ae336
Status: ✅  Deploy successful!
Preview URL: https://70d14b15.ant-design.pages.dev
Branch Preview URL: https://up-jest-version.ant-design.pages.dev

View logs

真的快了么?

afc163 avatar Jun 10 '25 14:06 afc163

真的快了么?

单文件感觉是快了,全量跑下来怎样还不清楚

li-jia-nan avatar Jun 10 '25 14:06 li-jia-nan