npm 包 babel-preset-jest 使用教程

在前端开发中，我们常常需要对代码进行测试。而 Jest 是一款流行的 JavaScript 测试框架，它支持测试多种类型的 JavaScript 代码，包括 React 组件等。为了让 Jest 能够解析 ES6+ 语法，我们需要使用一个叫做 babel-preset-jest 的 npm 包。本文将介绍如何使用 babel-preset-jest 来配置 Jest，以便可以测试最新的 JavaScript 语法。

安装 babel-preset-jest

首先，我们需要安装 babel-preset-jest。可以使用以下命令来安装：

npm install --save-dev babel-jest @babel/core @babel/preset-env babel-preset-jest

这里同时安装了 babel-jest、@babel/core、@babel/preset-env 和 babel-preset-jest 四个依赖包。其中，babel-jest 是 Jest 提供的用于编译 JavaScript 代码的插件，@babel/core 是 Babel 的核心库，@babel/preset-env 是 Babel 的预设，babel-preset-jest 是用于 Jest 的 Babel 预设。

配置 babel-preset-jest

安装好依赖后，我们需要在项目根目录下创建一个 .babelrc 文件，并添加以下内容：

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

这里通过 presets 属性来指定了需要使用的预设。@babel/preset-env 可以将 ES6+ 语法编译成 ES5 语法，babel-preset-jest 则是用于 Jest 的特殊预设。

在 Jest 中使用 babel-preset-jest

配置好 .babelrc 文件后，我们需要在 Jest 配置文件中添加以下代码：

module.exports = {
  transform: {
    "^.+\\.jsx?$": "babel-jest"
  }
};

这里使用了 Jest 的 transform 属性来指定需要使用的转换器。"^.+\\.jsx?$" 表示需要转换的文件后缀名，这里包括了 .js 和 .jsx。babel-jest 则是使用了之前安装的 babel-jest 插件来进行转换。

至此，我们已经完成了 babel-preset-jest 的配置。现在可以开始编写包含最新 JavaScript 语法的测试文件了。

下面是一个简单的测试文件例子：

import { sum } from './sum';

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

其中，sum 函数如下：

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

这个例子中使用了 ES6 的模块导入和导出语法，以及箭头函数等特性。通过 babel-preset-jest 的配置，Jest 可以正确地解析和运行这些语法。

结论

本文介绍了如何使用 babel-preset-jest 来配置 Jest，以便可以测试最新的 JavaScript 语法。通过本文的学习，读者可以掌握 babel-preset-jest 的基本使用方法，并可以在自己的项目中进行应用。

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