Jest 测试中如何使用 ES6 模块导入和导出

在现代的前端开发中，ES6 成为了最流行的 JavaScript 版本，在 ES6 中，我们可以使用「模块」的概念进行代码的封装和管理。而在 Jest 测试中，同样可以使用 ES6 模块，这样可以更好地组织我们的测试代码，使测试用例更加清晰和易于维护。

ES6 模块导入和导出的使用

ES6 模块有两种导入导出方式：命名导出和默认导出。

命名导出

命名导出需要通过关键字 export 来导出自定义的函数或变量，然后在需要使用这些函数或变量的文件中通过 import 导入使用。比如下面的示例：

// utils.js
export const add = (num1, num2) => num1 + num2;
export const subtract = (num1, num2) => num1 - num2;

// main.js
import { add, subtract } from "./utils.js";

const sum = add(2, 3);
const difference = subtract(5, 1);
console.log(sum, difference); // 输出 5 4

默认导出

默认导出只能导出一个自定义的函数或变量，需要通过关键字 export default 来导出，默认导出的函数或变量可以在导入时任意指定名称。比如下面的示例：

// utils.js
export default function sum(num1, num2) {
  return num1 + num2;
}

// main.js
import mySum from "./utils.js";

const result = mySum(2, 3);
console.log(result); // 输出 5

Jest 中使用 ES6 模块

在 Jest 中使用 ES6 模块也很简单，只需要在配置文件 jest.config.js 中加入以下代码：

-- -------------------- ---- -------
-------------- - -
  --------------------- -------
  ---------- -
    ------------ -------------
  --
  ---------- -----------------
  ----------------- -
    ----------- -------------------
  --
--
展开代码

其中要注意的是，需要使用 babel-jest 进行代码的转换，这需要安装 babel-jest 和 @babel/preset-env 两个包，通过在项目中添加 .babelrc 配置文件来告诉 Jest 如何进行转换：

{
  "presets": [["@babel/preset-env", { "targets": { "node": "current" } }]]
}

比如我们有以下的测试文件：

// sum.test.js
import sum from "@/sum.js";

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

// sum.js
export default function sum(a, b) {
  return a + b;
}

然后我们在命令行执行 npm run test 就可以看到测试通过了：

总结

在 Jest 中使用 ES6 模块可以更好地组织测试代码，使测试用例更加清晰易于维护。同时，我们也可以通过此来了解 ES6 中的模块概念以及导入导出的用法。

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