Jest 测试中使用 ES6 的最佳实践

Jest 是一个流行的 JavaScript 测试框架，用于编写单元测试和集成测试。它内置了许多功能，如测试运行器、断言库和 Mocking。当您在编写 Jest 测试时，您需要使用 ES6 模块语法来编写测试，但是您可能会遇到某些问题。在本篇文章中，我们将介绍一些 Jest 测试中使用 ES6 的最佳实践。

导入和导出

ES6 模块语法让我们可以使用 import 和 export 关键字来导入和导出 JavaScript 模块。在 Jest 测试中，您需要使用 import 和 export 来导入要测试的模块和相关的模块。

导入

您可以使用 import 关键字来导入要测试的模块。这个过程是通过下面的代码实现的：

import foo from './foo';

您也可以使用解构赋值方式导入多个变量：

import { foo, bar } from './foo';

有些模块可能导出的是默认对象和普通对象，您可以通过下面的方式分别导入：

import foo, { bar } from './foo';

还可以给模块导入定义别名：

import { foo as myfoo } from './foo';

导出

您可以使用 export 关键字来导出一个模块。下面是一个示例：

export function add(a, b) {
  return a + b;
}

使用 export default 导出默认对象：

export default {
  foo: 'foo',
  bar: 'bar',
};

使用 export { ... } 导出多个对象。

export { foo, bar };

babel-jest 的安装和使用

Jest 默认支持 ES6 语法，但却不支持 ES6 的新特性。在 Jest 中使用 ES6 的新特性，需要制定 transpiler 来自动编译代码。

如果您想要在 Jest 中使用 ES6，您需要安装 babel-jest。

npm install --save-dev babel-jest

然后您需要在 Jest 中配置 babel-jest。这可以在 jest.config.js 中配置。

module.exports = {
  transform: {
    '^.+\\.(js|jsx|ts)$': 'babel-jest',
  },
};

使用 Jest 测试 ES6

现在您已经了解了大部分关于 Jest 中导入、导出和 babel 的内容，接下来让我们来练习使用 Jest 测试 ES6。

例子

首先创建一个使用 ES6 导入和导出的模块 foo.js。

export default function foo() {
  return 'foo';
}

然后创建一个测试文件 foo.test.js。需要安装 jest 包和 babel-jest。

npm install --save-dev jest babel-jest @babel/core @babel/preset-env

在 jest 配置文件jest.config.js中开启babel：

module.exports = {
  transform: {
    '^.+\\.(js|jsx|ts)$': 'babel-jest',
  },
};

在babel.config.json文件中设置babel转译环境：

-- -------------------- ---- -------
-
  ---------- -
    -
      --------------------
      -
        ---------- -
          ------- ---------
        -
      -
    -
  -
-

编写测试代码：

import foo from './foo';

describe('test foo', () => {
  test('should retuen foo', () => {
    expect(foo()).toBe('foo');
  });
});

接下来我们运行测试：

npm run test

然后你会看到一个成功的测试结果:

PASS  ./foo.test.js
  test foo
    ✓ should return foo (2 ms)

总结

在 Jest 测试中使用 ES6 不再是一件难事，您只需要按照本文提供的技巧将其正确配置，就可以愉快地使用 Jest 进行开发和测试。这将使您可以充分利用 Jest 带来的效益，从而更轻松地编写高质量的 JavaScript 代码。

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