Skip to content

fix: preserve image imports in Jest transforms - #298

Open
nrps9909 wants to merge 2 commits into
ant-design:masterfrom
nrps9909:codex/fix-jest-image-imports
Open

nrps9909 wants to merge 2 commits into
ant-design:masterfrom
nrps9909:codex/fix-jest-image-imports

Conversation

@nrps9909

@nrps9909 nrps9909 commented Sep 5, 2026 •

Copy link
Copy Markdown

Importing a local image through imagePreprocessor currently emits export default even when Jest expects CommonJS, so require('./image.png') fails with Unexpected token export. Jest also decodes files as UTF-8 before calling the transformer, corrupting binary image data. Assets above 10 KB reach a webpack file-loader fallback that cannot run in Jest.

Read original image bytes, inline test assets without webpack file emission, and select CommonJS or ESM output using supportsStaticESM. Hash original bytes for caching: different byte sequences can decode to the same text, otherwise allowing stale image content.

Validation:

  • Recompiled and reran the seven image regressions on September 7 before removing the test file as requested by afc163. All seven pass, covering PNG/JPEG/GIF bytes, SVG, large assets, CommonJS execution, native ESM import and a two-process Jest cache invalidation check.
  • After removing the test file, the remaining repository suite passes its one test. Compile, ESLint, TypeScript and diff checks pass. The runtime source is byte-identical to the previously validated head; this follow-up changes only the test file.
  • Historical base comparison: all seven image cases fail on 967174ed2189d39e6580dd5490039c04a43aa093. Removing only the new cache key causes the second binary-change Jest run to fail.
  • Historical consumer validation: Ant Design Jest 30 / React 19 Image suite passes 8 suites, 118 tests and 56 snapshots, including PNG, SVG and large-asset imports. This consumer suite was not rerun for the test-file-only follow-up.

The PR now changes only src/jest/imagePreprocessor.ts, as requested. The removed regression source remains retrievable in prior commit b7fa700a92f60b3f679704caae4e59b80b10632a.

Based directly on master and independent of #297. Implemented and validated with OpenAI Codex assistance.

@coderabbitai

coderabbitai Bot commented Sep 5, 2026 •

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Team

Run ID: 1f35d68a-ff1d-45f5-9d86-5c199752ad84

📥 Commits

Reviewing files that changed from the base of the PR and between 967174e and b7fa700.

📒 Files selected for processing (2)
  • src/jest/imagePreprocessor.ts
  • tests/imagePreprocessor.test.js

Included review availability: Your plan provides up to 2 included reviews per hour; 1 remains after this review.


📝 Walkthrough

Walkthrough

图像预处理器改用原始文件字节调用 url-loader,支持静态 ESM 输出,并新增基于文件内容和转换选项的缓存键。测试覆盖多种图像格式、大资源、ESM 以及缓存失效场景。

Changes

图像预处理流程

Layer / File(s) Summary
预处理器与缓存键实现
src/jest/imagePreprocessor.ts
process 读取原始文件字节,并使用 limit: true 和静态 ESM 选项调用 url-loader。新增 getCacheKey,将文件内容、文件名、转换选项和包版本纳入 MD5 缓存键。
预处理器行为与缓存验证
tests/imagePreprocessor.test.js
测试验证 PNG、JPG、GIF、SVG、大资源和静态 ESM 输出。集成测试验证原始图片字节变化会使 Jest 缓存失效。

Estimated code review effort: 3 (Moderate) | ~20 minutes

Merge Risk: ⚪ Minimal · up to 9e010

Image imports in Jest now preserve original bytes and invalidate cached transforms when asset contents change, with coverage for supported image formats, ESM, CommonJS, large assets, and cache behavior. The change is ready to merge.

Sequence Diagram(s)

sequenceDiagram
  participant Jest
  participant imagePreprocessor
  participant fs
  participant url-loader
  Jest->>imagePreprocessor: 调用 process(filename, options)
  imagePreprocessor->>fs: readFileSync(filename)
  fs-->>imagePreprocessor: 返回原始文件字节
  imagePreprocessor->>url-loader: 传入字节与 esModule 选项
  url-loader-->>imagePreprocessor: 返回数据 URL 模块代码
  imagePreprocessor-->>Jest: 返回 code
Loading

Poem

小兔读取字节,文件不迷路
PNG 和 SVG,排队进数据 URL
大图留在内存,轻快又稳固
ESM 捧着默认导出
缓存听见字节变化,马上更新脚步

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 5 functions across 2 files. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 标题准确概括了 Jest 图像转换中保留图片导入的主要修复,内容简洁且与变更一致。
  • Fix all pre-merge checks with AI
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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

Comment @coderabbitai help to get the list of available commands.

Comment thread tests/imagePreprocessor.test.js Outdated
expect(updated.stdout + updated.stderr).toContain('1 passed');
expect(updated.status).toBe(0);
});
});

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can remove tests/imagePreprocessor.test.js.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed tests/imagePreprocessor.test.js in GitHub-Verified commit 9e010dc364763475398cf03ec4ef2db8e33187d1. The PR now changes only src/jest/imagePreprocessor.ts; the runtime source is unchanged. I reran all seven image regression cases before removing the file, then verified the remaining repository test, compile, ESLint, TypeScript and diff checks. The PR description now distinguishes this validation from the earlier Ant Design consumer run. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants