前端单元测试 Jest 结合 TS 浅析

Jest 是一个由 Facebook 开发的 JavaScript 测试框架，用于编写高效、可靠和可维护的测试。它与 React 应用程序的测试非常搭配，并且在其他 JavaScript 应用程序中也非常适用。本文将介绍 Jest 的主要功能，如何使用 Jest 编写测试，并提供一些最佳实践和技巧。

Jest 的特点

快速的测试执行

Jest 通过并行执行测试来提高测试速度。它还利用了缓存测试结果和智能重新运行测试的策略，以减少不必要的测试执行。此外，Jest 还支持在代码更改时只运行受影响的测试，这样可以节省更多的时间。

简单的配置

Jest 的默认配置非常合理，可以满足大多数项目的需求。如果需要更改配置，Jest 的配置选项非常直观和易于理解。此外，Jest 还提供了许多插件和扩展，以便在不同的场景下扩展和自定义配置。

强大的断言库

Jest 内置了一个强大的断言库，可以轻松地编写和管理断言。它提供了许多通用的断言，如 toBe()、toEqual()、toBeTruthy()、toBeFalsy() 等，也可以轻松地创建自定义断言。

隔离

测试程序拥有自己独立的进程 以最大限度地提高性能。

自动化的 Mocking

Jest 提供了一个简单而强大的 Mocking 框架，可以轻松地 Mock 任何 JavaScript 模块或库。它还支持自动 Mocking，可以自动 Mock 所有依赖项和模块，从而使测试更简单和可靠。

与 React 集成

Jest 与 React 应用程序的测试非常搭配，并提供了一些特定于 React 的功能。例如，它支持测试 React 组件和 Hook，并提供了一个测试工具箱（Testing Library for React），可以轻松地编写可读性强的测试。

如何在 TS 中使用 Jest

安装 Jest

推荐按照官网安装 Jest

要使用 Jest，首先需要将其安装为项目的依赖项。可以使用 npm 或 yarn 来安装 Jest：

bashCopy code

TS 中使用 Jest

环境搭建

npm install --save-dev @babel/preset-typescript

在 babel.config.js 文件中 配置

module.exports = {
  presets: [
    ['@babel/preset-env', {targets: {node: 'current'}}],
    '@babel/preset-typescript',
  ],
};

在 tsconfig.json 中配置

"compilerOptions": {
	"types": ["jest"]
}

在 packge.json 中配置

"scripts": {  
  "test": "jest"  
  // "test": "jest --coverage"
}

编写测试

Jest 使用类似于 Mocha 的语法来编写测试。测试代码通常位于与源代码相同的目录中，并且文件名以 .test.js 或 .spec.js 结尾。

以下是两个简单的示例测试：

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

在这个例子中，我们使用 test() 函数来定义一个测试用例，它接受两个参数：测试用例的描述和测试代码的回调函数。

import { add } from "./add";  
// Describe the test suite  
describe('add function', () => {  
  // Test case 1  
  it('should return the sum of two numbers', () => {  
    expect(add(1, 2)).toBe(3);  
  });  
  
  // Test case 2  
  it('should return NaN if one of the arguments is not a number', () => {  
    expect(add(1, '2' as any)).toBe("12");  
  });  
});

结语

好了，今天的内容就到分享这里啦，很享受与大家一起学习，沟通交流问题，如果喜欢的话，请为我点个赞吧 ！👍

作者：chenuvi

邮箱： chenui@outlook.com