跳至主内容

Jest 24：💅 焕然一新、精致优雅且支持 TypeScript

· 10 分钟阅读
Simen Bekkhus
Simen Bekkhus
非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

今天我们很高兴地宣布 Jest 的下一个主要版本——第 24 版！距离上一个次要版本发布已经过去了 4 个月，而距离 Jest 23 的发布更是有 8 个月之久，因此这次升级是一个重大版本，为每个人带来了新功能！亮点包括：通过将 Jest 内部升级至 Babel 7 实现内置 TypeScript 支持，修复了长期存在的控制台输出丢失问题以及计算大型差异时的性能问题，还有一个全新的闪亮官网。✨

完整变更列表请参阅更新日志。

全新官网​

@orta 为 Jest 官网提供了精美的重新设计，由社区成员 @montogeek 和 @brainkim 实现。

本次改版旨在更突出 Jest 的强大特性，并消除"Jest 主要是测试 React 应用的工具"这一固有印象——您可以在各种类型的项目中使用 Jest，我们希望让这一点更加明确。您可以在这个 issue 中阅读更多关于改版背后的设计理念。

TypeScript 支持​

我们在 Jest 24 内部升级到了 Babel 7，这带来了对 TypeScript 项目的支持。这意味着只要您配置 Babel 使用 @babel/preset-typescript，Jest 就能开箱即用地支持转译 TypeScript。需要注意的是，与 Flow 类似，默认的 TypeScript 支持存在一个限制：Babel 只会剥离类型注解使您的代码变为有效的 JavaScript，它_不会_执行类型检查。

尽管自 2017 年 12 月发布的 Jest 22 起就支持 Babel 7，但此前需要通过桥接模块来兼容 Jest 对 Babel 6 的支持。在 Jest 24 中，我们在社区成员 @milesj 的大力帮助下完全迁移到了 Babel 7。这意味着现在设置更简单，并且我们可以利用其他 Babel 7 特性，例如配置加载和自动的 modules 转译。请确保移除不再需要的 babel-core@^7.0.0-bridge.0。

如果您希望在测试时运行类型检查，应该使用 ts-jest。由于 Jest 默认会对 .ts（及 .tsx）文件应用 Babel，您需要配置转换器。或者，您也可以运行 tsc 命令，甚至使用 Jest runner 在运行测试的同时转译 TypeScript！更多信息请参考 jest-runner-tsc。

更多细节请参阅文档。

技巧

如果因故无法升级到 Babel 7，只要将 babel-jest 保持在 23 版本，您仍然可以在 Jest 24 中使用 babel@6。

test.todo​

Jest 23 有一项改动导致缺少实现的测试会抛出错误而非跳过执行。这项变更源于用户反馈称意外跳过的测试难以发现和追踪。然而，这个改动破坏了许多开发者用来规划测试编写的功能。

在 Jest 24 中，我们通过新增显式的 test.todo（灵感来源于优秀的 AVA 测试框架）来解决这个问题，该功能会在测试摘要中单独列出。它让您能快速规划要编写的测试用例，未来甚至可能有 ESLint 规则能提醒您忘记编写的测试。

test.todo('invalid input should throw');

test.todo('missing options should be normalized');

test.todo

改进的断言错误信息​

当测试失败时，您需要准确判断哪些变更属于预期进展，哪些属于意外回归。在大量变更中识别少数回归问题尤为重要。Jest 24 对多个匹配器的断言失败报告进行了优化，使其更加清晰简洁。由于这项工作将持续到 Jest 25，您可能会注意到某些暂时的不一致。如果您的测试从未失败，自然看不到这些改进——但对于其他用户来说，调试预期外行为将更加轻松。特别感谢 @ittordepam 和社区贡献者的辛勤付出。

您可以在这些 PR 中查看具体变更：7621、7557、7448、7325、7241、7152、7125、7107、6961。

改进示例：

断言失败

断言失败

类型不匹配

类型差异

模拟函数未调用

模拟函数

修复历史痛点​

本次发布修复了几个长期存在的问题。

首先要强调的是修复了 console.log 输出丢失的问题。Jest 会拦截并收集所有日志以提供堆栈跟踪，同时将日志传递给报告器供用户自定义处理。但这曾导致某些边缘情况下日志完全丢失。值得庆幸的是，@spion 在 Jest 24 中解决了这个问题，非常感谢他的贡献！

第二个问题是当预期值与实际值的序列化差异包含大量插入变更时（可能因测试错误或序列化程序缺陷导致意外差异，或测试驱动开发期间的临时失败导致预期差异），Jest 会耗尽内存。@ittordepam 使用 diff-sequences 包替换了原有差异算法，该方案理论上使用最小内存量，解决了此问题。这为未来实现类似 git 的单词级差异功能奠定了基础。欢迎查看此 PR，若您有兴趣参与实现，请随时联系我们！

其他亮点​

  • 改进了 globalSetup 和 globalTeardown：现在它们会像 setupFiles 一样应用代码转换，并且支持在 projects 中使用

  • 可自定义 Jest 快照存储位置，这对在大型构建流程中使用 Jest 的工具开发者特别有用

  • Jest CLI 的一个特点是：部分参数采用驼峰命名法（如 runInBand），而其他参数则采用连字符形式（如 no-cache）。在 Jest 24 中，两种形式都会得到识别，这意味着您可以随心所欲地书写命令行参数。

  • 我们将 setupTestFrameworkScriptFile 更名为 setupFilesAfterEnv，并将其改为数组类型。这一调整旨在更清晰地表明该选项的用途。我们计划在下一个主要版本中进一步优化配置，详见下文相关段落。

  • 为了减少 Jest 为“开箱即用”所做的魔法操作，本次版本中我们决定停止自动注入 regenerator-runtime（该库有时用于编译异步代码）。注入 regenerator-runtime 并非总是必要，我们认为用户应在需要时自行引入。如果您使用 @babel/preset-env 并将 targets 设置为现代 Node 版本（如 Node 6+），则无需额外引入。更多信息请参阅 使用 Babel 的文档。

  • Node.js 10 推出了名为 worker_threads 的实验性模块，其功能类似于浏览器中的 Web Worker。Jest 平台 的组成部分 jest-worker 将优先使用可用的 worker_threads 替代 child_process，从而大幅提升性能！基准测试 显示性能提升了 50%。由于该模块仍处于实验阶段，当 Jest 作为测试运行器时不会默认启用，但您可以在自己的项目中立即使用！我们计划待 Node.js 将其移出实验状态后默认启用。

破坏性变更​

所有破坏性变更均列于 更新日志，以下重点说明部分值得关注的变更：

  • 我们升级至 Micromatch 3。虽然这不会影响所有用户，但其 glob 解析规则比 Jest 23 使用的版本 2 更加严格。若遇到问题，请阅读 此说明 及相关 issues 中的无效 glob 示例。

  • 我们移除了 Node 4 所需的遗留代码。此前在技术上仍可在 Node 4 上运行 Jest 23，但升级后若不进行 polyfill 和转译则无法运行。

  • 快照中模拟函数的序列化方式有所变更 - 升级后请务必仔细检查更新后的快照。相关 PR。

  • Jest 不再自动注入 regenerator-runtime - 若遇到相关错误，请确保通过 @babel/preset-env 等工具正确配置 Babel 以转译 async 函数。相关 PR。

未来规划​

我们对 Jest 在 2018 JavaScript 现状调查 中荣获“最高满意度”奖项深感荣幸。2018 年另一重大里程碑发生在 10 月，Jest 周下载量首次突破 200 万次。衷心感谢大家！

我们由衷感激社区给予的信任，并期待在此基础上持续发展。我们将确保 Jest 24 及未来版本继续巩固这一卓越基础，始终作为 JavaScript 开发者工具链中不可或缺的组成部分。

这是我们在版本发布中首次尝试使用 Open Collective 的资金设立漏洞悬赏计划。这一举措成功吸引了非核心开发者参与新着陆页的实现，我们也对解决 Jest 全局变量与 Node 全局变量不匹配这个长期存在的 bug 充满信心。我们期待推行更多类似计划，如果你有特别关注的 bug 适合加入悬赏项目，请随时告知。同时，你可以通过问题标签查看所有悬赏任务。

我们已开始规划 Jest 25 的下一版本，其中最重要的计划特性是全面重构配置系统——当前的配置因选项重叠且混合使用 glob 模式与正则表达式而令人费解。我们非常欢迎你提出对 Jest 配置的改进建议，相关反馈可提交至该 issue。

你可能已听闻我们计划将代码库从 Flow 迁移至 TypeScript。我们相信这次迁移将吸引更多贡献者参与，让 2019 年的 JavaScript 测试体验更上一层楼。🚀 该计划预计在不久后的次要版本中落地实施，相关反馈可提交至该 RFC。

最后，如果你曾好奇 Jest 的构建原理，@cpojer 已录制视频详解 Jest 的底层架构设计。若有任何疑问，欢迎随时联系我们。视频可在我们的网站观看。

祝大家测试愉快！ 🃏