Softonic

Jest 配置生成器

步 1 / 2 Jest 配置
下一个

选择你的技术栈，TypeScript、React、Node 后端或 Svelte，生成器就会输出一份带有正确转换器、模块映射器、测试环境和覆盖率阈值的 jest.config.js。它还涵盖了大家常常忘记的每个选项：用于 CSS/图片的 moduleNameMapper、setupFilesAfterEach，以及用于忽略 node_modules 和 dist 的 testPathIgnorePatterns。

如何构建 Jest 配置

  1. 1

    选择你的技术栈

    TypeScript、React、Vue、Svelte、纯 Node，或它们的组合。每一种都会预先填入正确的转换器。

  2. 2

    选择测试环境

    浏览器代码用 jsdom，后端用 node，或者自定义环境。

  3. 3

    切换功能开关

    覆盖率阈值、快照测试、模拟路径、自定义配置文件、转换忽略模式。

  4. 4

    下载配置文件

    输出结果是带注释的 `jest.config.js` 或 `jest.config.ts`，以及应添加到 `package.json` 中的 npm 脚本。

示例输出：React + TypeScript 项目

module.exports = {
  preset: "ts-jest",
  testEnvironment: "jsdom",
  setupFilesAfterEach: ["<rootDir>/jest.setup.ts"],
  moduleNameMapper: {
    "\\.(css|less|scss|sass)$": "identity-obj-proxy",
    "\\.(jpg|jpeg|png|gif|svg)$": "<rootDir>/__mocks__/fileMock.js",
    "^@/(.*)$": "<rootDir>/src/$1"
  },
  testPathIgnorePatterns: ["/node_modules/", "/dist/", "/build/"],
  transform: {
    "^.+\\.tsx?$": ["ts-jest", { tsconfig: "tsconfig.test.json" }]
  },
  collectCoverageFrom: [
    "src/**/*.{ts,tsx}",
    "!src/**/*.d.ts",
    "!src/**/*.stories.*"
  ],
  coverageThreshold: {
    global: { branches: 80, functions: 80, lines: 85, statements: 85 }
  }
};

决策指南：该选哪种环境？

你的代码运行在…… 使用
浏览器（DOM、window） jsdom（或为提升速度使用 @happy-dom/jest-environment）
Node 服务器 node
Service Worker 自定义环境，以 node 为基础
React Native react-native 预设

转换器速查表

源类型 转换器
TypeScript ts-jest 或 @swc/jest
由 Babel 编译的 JSX babel-jest（默认）
Vue SFC @vue/vue3-jest + babel-jest
Svelte svelte-jester
静态图片 在 moduleNameMapper 中手动模拟

覆盖率阈值：该定多少？

  • 关键路径／库：行覆盖率 90% 以上，分支覆盖率 85% 以上。
  • 功能团队：行覆盖率 80%，分支覆盖率 70%。
  • 快速变化的 UI：行覆盖率 60–70%；业务逻辑追求更高，布局部分可以更低。
  • 原型项目：完全禁用阈值；把覆盖率当作一个数值来追踪，而不是一道门槛。

常见错误

  • 对纯 Node 代码使用 jsdom。 测试更慢却毫无收益，请切换到 node。
  • ESM 包缺少 transformIgnorePatterns。 现代包仅以 ESM 形式发布；需要告知 Jest 对它们进行转换。
  • 不用映射器就模拟图片/CSS。 在测试中导入 .png 时，如果没有模拟模块，Jest 就会报错。
  • 把 clearMocks 设为 false。 模拟会在测试之间泄漏，失败变得不可预测。请默认开启它。

常见问题

SWC（@swc/jest）比 ts-jest 快 10 到 20 倍，因为它跳过了 Jest 内部的完整类型检查。请在 CI 中用 tsc --noEmit 单独运行类型检查。如果希望类型错误导致测试失败，就用 ts-jest；如果追求速度，则选用 SWC。

happy-dom 的运行速度比 jsdom 快约 2 到 3 倍，并实现了 DOM API 的大部分子集。它会遗漏一些边缘情况，因此如果遇到「not implemented」错误，请回退到 jsdom。

需要，如果你的组件直接导入 .css 或 .scss 文件的话。请将它们映射到 identity-obj-proxy（用于 CSS 模块）或一个极小的空桩文件。否则，测试会在导入时报错。

可以。选择 TypeScript 输出选项，生成器就会输出 jest.config.ts。当安装了 ts-node 时，Jest 27 及以上版本会自动加载 .ts 格式的配置。

相关工具

ASCII 表参考

完整 ASCII 表，覆盖 0 到 127；列出每个代码的十进制、十六进制、八进制、二进制值和 HTML 数字字符引用写法，包括 NUL、LF、DEL。

HTML 字符参考

可搜索的 HTML 实体列表，含命名代码与数值代码，并支持一键复制特殊字符和符号。

键盘快捷键参考

搜索 macOS、Windows 和 Linux 上 VS Code、Chrome 以及使用 GNU Readline 的 Bash 的文档默认快捷键。

邮箱验证器

验证邮箱地址：RFC 5322 语法检查、实时 MX 记录查询，并显示本地部分、域名和长度详情。不会发送任何邮件。

编辑器配置生成器

根据你的缩进样式与大小、行尾、字符集和空格规则生成 .editorconfig 文件，让不同集成开发环境（IDE）和编辑器的格式保持一致。

证书解码器

粘贴一张 X.509 PEM 证书，并查看解码后的字段：主体、颁发者、序列号、签名算法、有效期及主体备用名称（SAN）。

此工具还提供其他语言版本