如何在 Jest 中使用自定义的 Babel 配置

如何在 Jest 中使用自定义的 Babel 配置

在前端项目中，我们常常使用 Jest 进行单元测试。其中，Jest 默认使用 Babel 进行代码转换，以便支持 ES6+ 的新特性。然而，当我们需要使用一些自定义的 Babel 配置时，可能就会遇到一些问题。

本文将介绍如何在 Jest 中使用自定义的 Babel 配置，以便在单元测试中使用自定义的 JavaScript 特性和插件。

1. 安装必要的依赖项

在使用自定义 Babel 配置时，我们需要安装一些必要的依赖项。在项目根目录下，打开终端并输入以下命令：

npm install @babel/core @babel/preset-env babel-jest -D

解释一下这些依赖项：

• @babel/core：Babel 的核心功能，可以将 JavaScript 代码转换为浏览器可以执行的 ES5 代码。
• @babel/preset-env：一个 Babel 预设，用于根据当前的运行环境自动选择转换需要的插件，从而使用新的 JavaScript 特性。
• babel-jest：将 Jest 和 Babel 集成在一起。它可以将测试文件中的代码转换为 Jest 可以理解的格式。

1. 创建 .babelrc 配置文件

在项目根目录下创建一个 .babelrc 文件。

touch .babelrc

然后，在 .babelrc 文件中添加以下内容：

{
  "presets": ["@babel/preset-env"]
}

这表示我们将使用 @babel/preset-env 预设转换 JavaScript 代码。

1. 修改 Jest 配置文件

在项目根目录下找到 jest.config.js 文件，若没有则新建这个文件。

接下来，添加以下代码：

module.exports = {
  collectCoverage: true,
  verbose: true,
  transform: {
    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
  },
};

这里的 transform 属性告诉 Jest 在运行测试之前先使用 Babel 转换 JavaScript 代码，以便测试文件中的新特性或插件可以正确工作。

1. 测试一下

我们可以编写一个测试用例来验证我们的配置是否生效。在项目中创建一个名为 sum.js 的文件：

export function sum(a, b) {
    return a + b;
}

然后在项目根目录下创建一个名为 sum.test.js 的测试文件，测试 sum 函数是否正确工作。

import { sum } from './sum';

describe('sum', () => {
  it('should work', () => {
    expect(sum(1, 2)).toEqual(3);
  });
});

运行以下命令，执行测试：

npm test

如果一切顺利，你将看到测试通过了！

总结

通过执行以上步骤，我们可以成功在 Jest 中使用自定义的 Babel 配置。这将为我们提供更多的自由度，以便支持更多的 JavaScript 特性和插件，从而使我们的单元测试更加强大和高效。希望这篇文章对你有所帮助！

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652f80367d4982a6eb0a542e