Jest 测试如何使用 ES6 import/export 语法

前言

Jest 是一个用于 JavaScript 代码测试的框架。随着前端技术的不断发展，越来越多的项目开始采用 ES6 的 import/export 语法来管理模块，而 Jest 也提供了对该语法的支持。在本文中，我们将会探讨 Jest 如何使用 ES6 import/export 语法进行测试。

环境准备

在开始之前，我们需要先准备好 Jest 和 Babel 的环境：

1. 安装 Jest：npm install jest --save-dev

2. 安装 Babel 相关依赖：npm install babel-jest @babel/core @babel/preset-env --save-dev

3. 配置 Babel：在项目根目录下创建一个 .babelrc 文件：

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

测试 ES6 import/export 语法

考虑以下的基本示例，我们将测试一个简单的模块，其中使用了 ES6 import/export 语法：

// sum.js
export const sum = (a, b) => a + b;

// sum.test.js
import { sum } from './sum';

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

如上所示，我们从 sum.js 文件中导出了一个 sum 函数，然后在 sum.test.js 中使用 ES6 导入 sum 模块并测试其结果。

运行 jest sum.test.js 命令，你将会看到测试结果输出 PASS，表明测试成功。

模拟 import 语句

有时候，我们可能会在测试中需要模拟一个具有多个导入的文件。例如，考虑以下的示例，我们想要测试一个导入了多个模块的代码：

// add.js
import { sum } from './sum';
import { multiply } from './multiply';

export const add = (a, b) => sum(a, b) + multiply(a, b);

在测试代码中，我们需要模拟 sum.js 和 multiply.js 的导入，才能测试 add 模块的返回值：

// add.test.js
import { add } from './add';

jest.mock('./sum', () => ({
  sum: jest.fn().mockReturnValue(5)
}));

jest.mock('./multiply', () => ({
  multiply: jest.fn().mockReturnValue(10)
}));

test('adds and multiplies to equal 15', () => {
  expect(add(2, 3)).toBe(15);
  expect(sum).toHaveBeenCalledWith(2, 3); // 验证 sum 调用正确
  expect(multiply).toHaveBeenCalledWith(2, 3); // 验证 multiply 调用正确
});

如上所示，我们使用 jest.mock 函数模拟了 sum.js 和 multiply.js 的导入，并指定它们的返回值。然后，我们测试了 add 模块的返回值，并验证了 sum 和 multiply 函数的调用情况是否正确。

总结

在本文中，我们探讨了 Jest 如何使用 ES6 import/export 语法进行测试，并提供了具体的示例代码。希望本文能够对你学习前端测试有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b1d4adadd4f0e0ffb078e9