babel-jest 是一个用于在 Jest 中集成 Babel 转译器的 npm 包。通过 babel-jest，可以让 Jest 识别和转译 ES6/ES7 语法和 JSX 语法。本文将详细介绍如何使用 babel-jest，并附带示例代码。
安装
首先需要在项目中安装 babel-jest 和相关依赖：
npm install --save-dev jest babel-jest @babel/core @babel/preset-env @babel/preset-react
其中，@babel/core、@babel/preset-env 和 @babel/preset-react 是 Babel 的核心包和预设包，用于转译 ES6/ES7 和 JSX 语法。
配置
完成安装后，在项目根目录创建一个 .babelrc 文件，并添加以下内容：
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}这里只配置了两个预设包，如果需要使用其他包，可按需进行安装和配置。更多关于 .babelrc 配置的信息，请参考 Babel 官方文档。
接着，在 package.json 文件中添加以下配置：
{
"jest": {
"transform": {
"^.+\\.jsx?$": "babel-jest"
}
}
}这里配置了 Jest 在执行测试时使用 babel-jest 进行转译。
示例代码
下面是一段使用 babel-jest 的示例代码：
// MyComponent.jsx
import React from 'react';
export default function MyComponent() {
return <div>Hello, Jest!</div>;
}-- -------------------- ---- ------- -- -------------------- ------ ----- ---- -------- ------ - ------ - ---- ------------------------- ------ ----------- ---- ---------------- ------------- ------- -------- -- -- - ----- - --------- - - ------------------- ---- ----- ------- - ----------------- --------- ------------------------------------ ---
在这个示例中，我们测试了一个简单的组件 MyComponent 是否能够正确渲染。由于 babel-jest 的存在，我们可以在测试文件中直接使用 ES6/ES7 和 JSX 语法，而不用担心它们是否能够被正确地转译。
总结
通过本文的介绍，你已经学会了如何使用 babel-jest 将 Babel 转译器集成到 Jest 中，并且可以愉快地使用 ES6/ES7 和 JSX 语法进行测试啦！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/50698