随着前端技术的不断发展，越来越多的开发者开始使用 Babel 和 Jest 来构建和测试他们的 React 项目。Babel 是一个 JavaScript 编译器，它可以将最新的 ECMAScript 语法转换成浏览器可以理解的代码。Jest 是一个流行的 JavaScript 测试框架，它提供了一系列强大的工具来测试你的代码。
在本文中，我们将详细介绍如何在 React 项目中正确配置 Babel 和 Jest，以便你可以更好地使用它们来构建和测试你的应用程序。
Babel 的正确配置
在开始配置 Babel 之前，你需要确保已经安装了 Node.js 和 npm。如果你还没有安装它们，请先去官网下载并安装。
安装 Babel
首先，你需要在你的项目中安装 Babel。你可以使用 npm 或者 yarn 来安装它：
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react
或者
yarn add --dev @babel/core @babel/preset-env @babel/preset-react
这里，我们安装了三个包：@babel/core、@babel/preset-env 和 @babel/preset-react。@babel/core 是 Babel 的核心包，@babel/preset-env 是一个可以自动根据你的目标环境转换代码的预设，@babel/preset-react 是一个可以将 JSX 转换为普通的 JavaScript 的预设。
配置 Babel
一旦你安装了 Babel，你就需要在你的项目中创建一个 .babelrc 文件，并将以下内容添加到其中：
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}这个配置文件告诉 Babel 使用 @babel/preset-env 和 @babel/preset-react 来转换你的代码。你可以根据需要添加其他的预设或插件。
集成 Babel 到 Webpack
如果你使用 Webpack 来构建你的应用程序，那么你需要在你的 webpack.config.js 文件中添加以下内容：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- --------------
-------- ---------------
---- -
------- --------------
-
-
-
-
-- ---
-这个配置告诉 Webpack 在加载 .js 和 .jsx 文件时使用 babel-loader 进行转换。
Jest 的正确配置
现在，让我们来看看如何配置 Jest 来测试你的 React 应用程序。
安装 Jest
首先，你需要在你的项目中安装 Jest。你可以使用 npm 或者 yarn 来安装它：
npm install --save-dev jest babel-jest react-test-renderer
或者
yarn add --dev jest babel-jest react-test-renderer
这里，我们安装了三个包：jest、babel-jest 和 react-test-renderer。jest 是 Jest 的核心包，babel-jest 是一个可以让 Jest 使用 Babel 转换代码的包，react-test-renderer 是一个可以让你测试 React 组件的包。
配置 Jest
一旦你安装了 Jest，你就需要在你的项目中创建一个 jest.config.js 文件，并将以下内容添加到其中：
-- -------------------- ---- -------
-------------- - -
--------------------- -
-----
-----
--
---------- -
-------------- ------------
--
---------- -
------------------------------
--------------------------------
-
-这个配置文件告诉 Jest 在加载 .js 和 .jsx 文件时使用 babel-jest 进行转换，并且告诉 Jest 在哪里寻找测试文件。
编写测试用例
现在，你可以开始编写测试用例了。以下是一个简单的测试用例，它测试一个名为 Button 的 React 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ----------------------
------ ------ ---- -----------
------------------ -- -- -
-------- ------- --- ---------- -- -- -
----- ------ - -------------- ----
------------------------------------------
---
---这个测试用例使用 react-test-renderer 来渲染 Button 组件，并使用 Jest 的快照测试来确保组件在不同的情况下都渲染出相同的结果。
结论
在本文中，我们详细介绍了如何在 React 项目中正确配置 Babel 和 Jest。通过正确配置这两个工具，你可以更好地构建和测试你的应用程序，并确保它们在各种环境下都能正常工作。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674441cac22b09372b1109d5