在前端开发中，测试是不可或缺的环节。而 Jest 作为一款常用的 JavaScript 测试框架，被广泛用于前端开发中。然而，在使用 Jest 进行测试时，我们有时会遇到缺少 polyfills 的问题，这会导致测试失败，影响我们的代码质量和开发效率。本文将介绍如何解决 Jest 测试中遇到缺少 polyfills 的问题，帮助读者更好地使用 Jest 进行前端开发和测试。
什么是 polyfills？
polyfills 是指“填补代码缺陷”的技术，它可以让不支持某一特性的浏览器能够模拟出这一特性，从而达到兼容的目的。在前端开发中，我们常常会遇到需要使用新的 ECMAScript 特性，而低版本的浏览器不支持这些特性的情况，这时我们就需要使用 polyfills 来兼容这些特性。
Jest 中遇到缺少 polyfills 的问题
在使用 Jest 进行测试时，我们有时会遇到以下错误提示：
ReferenceError: regeneratorRuntime is not defined
这是因为我们在编写测试代码时使用了 async 和 await 这两个 ECMAScript 2017 的新特性，而 Jest 并不支持这些特性，需要使用 polyfills 进行兼容。具体来说，我们需要引入 regenerator-runtime 这个包来实现对 async 和 await 的兼容。
另外，如果我们在测试代码中使用了 Fetch API（用于发送 HTTP 请求和获取响应结果），也需要引入对应的 polyfills，例如 fetch 和 es6-promise。
解决方法
要解决 Jest 测试中遇到缺少 polyfills 的问题，我们需要进行以下步骤：
1. 安装依赖包
我们首先需要安装在测试中所需的 polyfills 包，包括 regenerator-runtime、fetch 和 es6-promise。
npm install regenerator-runtime fetch es6-promise --save-dev
2. 引入 polyfills 包
安装完成 polyfills 包之后，我们需要在测试代码中引入这些包。具体来说，我们可以在 Jest 配置文件中的 setupFilesAfterEnv 字段中添加以下代码，以引入所需的 polyfills 包：
// jest.config.js
module.exports = {
...
setupFilesAfterEnv: ['./setupTest.js'],
...
};// setupTest.js import 'regenerator-runtime/runtime'; import '@testing-library/jest-dom/extend-expect'; import 'whatwg-fetch'; import 'es6-promise';
3. 配置 babelrc
还需要在根目录创建 .babelrc.js 配置文件，添加如下代码来让 Jest 支持 ES6+
module.exports = {
presets: [['@babel/preset-env', { targets: { node: 'current' } }]],
};示例代码
下面的示例代码演示了如何使用 polyfills 进行测试代码兼容。
-- -------------------- ---- -------
------ ------------------------------
------ ----- ---- -------------
--------------- ------ -- -- -
---------- ------- ---- ------ ----- ----- -- -- -
----- -------- - ----- ------------------------------------------------------
----------------------------------
---
---结论
本文介绍了在 Jest 测试中遇到缺少 polyfills 的问题，并提供了一套步骤解决这个问题的方法。在使用 Jest 进行前端开发时，我们应该时刻关注测试的质量和效率，积极使用 polyfills ，让测试代码更兼容、更稳定。同时，我们还要关注前端技术的发展，不断学习新技术，提升自己的技术水平和开发能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6715fcf9ad1e889fe21a0ed7