Jest 是一个流行的用于 JavaScript 测试的框架，它为你提供了一个简单而强大的工具，可以测试你的前端应用程序。但是当你想使用 ES6 语法时，它可能会遇到一些问题。
在本文中，我们将探讨如何在 Jest 中使用 ES6 语法以及如何将其设置为支持 ES6，以便你可以享受使用最新的语言功能。
使用 Babel 转换 ES6
我们可以通过使用 Babel 将我们的 ES6 代码转换为 ES5 代码，以便 Jest 可以理解它。
首先，我们需要安装 Babel 相关的依赖：
npm install --save-dev babel-jest @babel/core @babel/preset-env
接下来，在项目根目录创建一个 .babelrc 文件，并添加以下内容：
-- -------------------- ---- -------
-
---------- -
--------------------- -
---------- -
------- ---------
-
--
-
-这将告诉 Babel 将你的代码转换为适用于当前 Node.js 版本的代码。
然后，在 Jest 的配置文件中（通常是 jest.config.js），添加以下代码：
module.exports = {
transform: {
'^.+\\.jsx?$': 'babel-jest',
},
};transform 配置项的作用是告诉 Jest 在运行测试之前使用 babel-jest 转换代码。
现在，当你运行 Jest 时，它应该可以理解你的 ES6 代码了。
使用 ES6 模块
如果你想使用 ES6 模块来组织你的代码，你还需要做一些额外的工作。
首先，在使用 Babel 转换你的代码时，你需要添加 @babel/plugin-transform-modules-commonjs 插件，以便将 ES6 模块转换为 CommonJS 模块（因为 Node.js 目前还不支持 ES6 模块）。
npm install --save-dev @babel/plugin-transform-modules-commonjs
然后，在 .babelrc 文件中添加以下内容：
-- -------------------- ---- -------
-
---------- -
--------------------- -
---------- -
------- ---------
-
--
--
---------- --------------------------------------------
-最后，在 Jest 配置文件中添加以下内容：
module.exports = {
transform: {
'^.+\\.jsx?$': 'babel-jest',
},
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1',
},
};moduleNameMapper 配置项用于将模块路径映射到你的源代码路径。
现在你可以愉快地使用 ES6 模块来组织你的代码了！
示例代码
下面是一个使用 ES6 语法和模块的示例代码：
// src/utils.js
export const sum = (a, b) => a + b;
// src/app.js
import { sum } from '@/utils';
console.log(sum(1, 2));// __tests__/app.test.js
import { sum } from '@/utils';
describe('app', () => {
test('sum', () => {
expect(sum(1, 2)).toBe(3);
});
});结论
在本文中，我们探讨了如何在 Jest 中使用 ES6 语法以及如何使用 ES6 模块来组织你的代码。让我们总结一下：
- 使用 Babel 将你的 ES6 代码转换为 ES5 代码。
- 如果你想使用 ES6 模块，你需要将其转换为 CommonJS 模块，并在 Jest 配置文件中添加正确的映射路径。
现在，你可以放心地使用最新的 ES6 语法来编写你的测试代码了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b22c6148841e9894e7720a