Jest 测试中遇到的 “ReferenceError: regeneratorRuntime is not defined” 解决方案-JavaScript中文网-JavaScript教程资源分享门户

在进行前端单元测试时，我们经常会使用 Jest 这个测试框架。但是，有时候我们会遇到一个问题，就是在测试中会出现 “ReferenceError: regeneratorRuntime is not defined” 的错误。那么这个错误是什么意思呢？它又该如何解决呢？下面就来详细介绍一下。

问题解释

在进行 Jest 测试时，我们经常会使用 ES6 的语法，比如箭头函数、async/await 等等。而这些语法需要使用 babel 转译器进行转译，才能在 Jest 中正常运行。而 babel 转译器需要使用一个叫做 “regeneratorRuntime” 的库来帮助转译 async/await 这样的语法。如果我们在测试中没有引入这个库，就会出现 “ReferenceError: regeneratorRuntime is not defined” 的错误。

解决方案

要解决这个问题，我们需要引入 “regeneratorRuntime” 这个库。具体方法如下：

安装 babel-plugin-transform-runtime

npm install --save-dev babel-plugin-transform-runtime

在 babel 配置文件中添加插件

在 .babelrc 或者 babel.config.js 文件中添加如下插件：

{
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "corejs": 3
    }]
  ]
}

在测试文件中引入 regeneratorRuntime

在测试文件的开头添加如下代码：

import 'regenerator-runtime/runtime';

这样，我们就成功解决了 “ReferenceError: regeneratorRuntime is not defined” 的问题。

示例代码

下面是一个示例代码，演示了如何在 Jest 测试中使用 async/await 语法，并且避免了 “ReferenceError: regeneratorRuntime is not defined” 的错误。

// javascriptcn.com 代码示例
// index.js
export async function fetchData() {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  const data = await response.json();
  return data;
}

// index.test.js
import 'regenerator-runtime/runtime';
import { fetchData } from './index';

test('fetchData should return correct data', async () => {
  const data = await fetchData();
  expect(data.title).toBe('delectus aut autem');
});

总结

在进行 Jest 测试时，我们需要使用 babel 转译器来转译 ES6 的语法。而 babel 转译器需要使用 “regeneratorRuntime” 这个库来帮助转译 async/await 这样的语法。如果我们没有引入这个库，就会出现 “ReferenceError: regeneratorRuntime is not defined” 的错误。要解决这个问题，我们需要安装 babel-plugin-transform-runtime 插件，并在测试文件中引入 regeneratorRuntime。这样，我们就可以在 Jest 测试中愉快地使用 async/await 语法了。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/650b8e4f95b1f8cacd5a016e