JavaScript - 使用 Jest 进行代码测试

您可以使用 Jest 测试代码，更早地发现错误，从而提高应用程序的可靠性和可维护性。Jest 是 JavaScript 测试的热门选择，尤其适用于使用 Node.js、React、Angular 和 Vue.js 构建的应用程序。让我们来看看 Jest 的功能以及如何使用它们。

什么是 Jest?

由 Facebook 创建的 Jest 测试框架注重效率和适应性。Jest 可以轻松与 JavaScript 和 TypeScript 应用程序集成，并支持 React 等流行的库和框架。其主要功能包括集成模拟支持、零配置和快照测试。

Jest 的功能

使用 Jest 之前，您需要了解以下一些功能 -

• 零配置:几乎无需任何配置即可开始创建和交付测试。但也可以使用配置文件提供测试套件。

• 快照: 也可以使用 Jest 启用快照测试。简单来说，就是将已保存的快照与快照进行比较，以查看是否存在匹配的功能。

• 隔离测试: 为了减少执行时间，Jest 测试会并行执行。

• Mocking 支持: Jest 可以轻松创建虚拟函数，以便测试代码与其他组件的交互方式。

设置 Jest

要使用 Jest，您必须先将其安装到项目中。请按照以下步骤操作:

1.初始化项目: 您需要打开终端并导航到项目文件夹，然后运行以下命令 -

npm init -y

2. 安装 Jest: 然后您需要运行以下命令 -

npm install --save-dev jest

3. 将 Jest 添加到您的脚本: 找到 package.json 文件，并在其中添加以下行 -

"scripts": {
   "test": "jest"
}

现在您可以为 JavaScript 代码编写第一个测试了。

示例 1

这是一个简单基本的测试，用于检查函数 sum 是否返回正确的结果。

// sum.js
function sum(a, b) {
   return a + b;
}
module.exports = sum;

Test File

Here is the test file code −

// sum.test.js
const sum = require('./sum');

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

使用以下命令运行上述测试代码 -

npm test

在此测试中 - expect(sum(1, 2)).toBe(3); 检查 sum(1, 2) 返回 3。

示例 2

Jest 可以轻松处理异步测试。让我们创建一个异步函数并对其进行测试。

// fetchData.js
async function fetchData() {
   return 'freeCodeCamp';
}
module.exports = fetchData;

测试文件

以下是测试文件代码 -

// fetchData.test.js
const fetchData = require('./fetchData');

test('the data is freeCodeCamp', async () => {
   const data = await fetchData();
   expect(data).toBe('freeCodeCamp');
});

此处，Jest 在 fetchData() 完成后执行 expect 函数。

示例 3

模拟函数让您无需实际函数即可测试和建模代码交互。以下是如何创建一个简单的模拟函数。

const myMockFunction = jest.fn(x => x + 42);

test('mock function test', () => {
   expect(myMockFunction(0)).toBe(42);
});

在此测试中，jest.fn() 用于生成一个模拟函数，该函数将任何输入值加 42。此测试确认当调用 myMockFunction(0) 时，返回 42。