在使用 Jest 进行前端单元测试时，你可能会遇到一个错误：ReferenceError: regeneratorRuntime is not defined。这个错误通常是由于异步代码中使用了 async/await，但是没有正确引入 regenerator-runtime 库所导致的。在本文中，我们将介绍这个问题的根本原因，并提供解决方案和示例代码。
1. regeneratorRuntime 是什么？
regenerator-runtime 是对 ECMAScript 6 (ES6) 中的产生器函数 (generator functions) 和异步/等待 (async/await) 关键字的转译器库。由于这两个新特性需要使用一个运行时环境才能正确工作，因此 babel 在将 ES6 转换为可在浏览器中运行的 JavaScript 时，通常会添加 regenerator-runtime 库。
2. 为什么会报错？
在使用 Jest 进行单元测试时，我们通常需要使用 babel-jest 转译器来支持 ES6 和 JSX 语法。babel-jest 默认会添加 @babel/preset-env 以及 @babel/preset-react 两个依赖。在使用这些 preset 的同时，我们通常需要在项目中安装 regenerator-runtime 库。
如果没有正确安装 regenerator-runtime 库，当我们在单元测试中使用了 async/await 时，我们就会遇到 ReferenceError: regeneratorRuntime is not defined 的错误。
3. 如何解决报错
方法一：手动引入 regenerator-runtime 库
为了解决这个问题，我们需要手动引入 regenerator-runtime 库。我们可以在项目中安装这个库，然后在我们的测试用例文件中添加以下代码：
import 'regenerator-runtime/runtime';
这一行代码将会在我们的测试代码中引入在项目中安装的 regenerator-runtime 库。
方法二：在 babel.config.js 中添加 @babel/plugin-transform-runtime
我们还可以通过添加 @babel/plugin-transform-runtime 插件来优化我们的 babel 配置。@babel/plugin-transform-runtime 插件将自动引入 regenerator-runtime 库，从而解决我们的问题。
首先在项目中安装 @babel/plugin-transform-runtime 和 regenerator-runtime：
npm install --save-dev @babel/plugin-transform-runtime regenerator-runtime
接着，在你的 babel.config.js 文件中添加以下插件配置：
-- -------------------- ---- -------
-------------- - -
-------- -
-
--------------------
-
---------- -
------- ----------
----------- ------ - ----------
-
-
--
---------------------
--
-------- -
---------------------------------
-
-这样，@babel/plugin-transform-runtime 就会自动为你引入 regenerator-runtime 库了。
4. 示例代码
我们来看一个示例代码模块，假设我们的代码模块如下：
// fetchUser.js
export const fetchUser = async (id) => {
const response = await fetch(`https://api.example.com/users/${id}`);
const json = await response.json();
return json;
};如果我们想要测试这个模块，我们可以使用 Jest 进行单元测试，测试文件如下：
// fetchUser.test.js
import { fetchUser } from './fetchUser';
test('fetchUser should return an object', async () => {
const user = await fetchUser(123);
expect(typeof user).toBe('object');
});但是如果我们没有正确的引入 regenerator-runtime，我们就会收到错误信息：
ReferenceError: regeneratorRuntime is not defined
为了解决这个问题，我们可以在测试文件顶部手动引入 regenerator-runtime：
-- -------------------- ---- ------- -- ----------------- ------ ------------------------------ ------ - --------- - ---- -------------- --------------- ------ ------ -- -------- ----- -- -- - ----- ---- - ----- --------------- ------------- --------------------- ---
或者我们可以在配置文件中添加 @babel/plugin-transform-runtime 插件，让 babel 自动引入 regenerator-runtime：
-- -------------------- ---- -------
-- ---------------
-------------- - -
-------- -
-
--------------------
-
---------- -
------- ----------
----------- ------ - ----------
-
-
--
---------------------
--
-------- -
---------------------------------
-
-无论你采用哪种方法，最后运行 Jest 单元测试的时候，就不会再收到 ReferenceError: regeneratorRuntime is not defined 的错误了。
5. 总结
在使用 Jest 进行单元测试时，如果你使用了 async/await，却忘记了添加 regenerator-runtime 库，就会在单元测试执行时收到 ReferenceError: regeneratorRuntime is not defined 的错误。为了解决这个问题，我们可以手动引入 regenerator-runtime 库或者在 babel 配置中添加 @babel/plugin-transform-runtime 插件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647ad5bb968c7c53b06774a1