Jest 是一个由 Facebook 开发的 JavaScript 测试框架，它具有简单易用、快速高效、功能强大等优点，是前端开发中不可或缺的测试工具之一。在本文中，我们将介绍 Jest 的基本使用方法，并通过一个示例项目来演示 Jest 在前端项目中的应用。
Jest 的基本使用方法
安装 Jest
使用 Jest 首先需要将其安装到项目中，可以通过 npm 进行安装：
npm install jest --save-dev
编写测试用例
Jest 的测试用例是以 .test.js 或 .spec.js 结尾的文件，我们可以在这些文件中编写测试代码。例如，我们有一个名为 sum.js 的文件，其中包含一个加法函数：
function sum(a, b) {
return a + b;
}
module.exports = sum;我们可以在 sum.test.js 文件中编写测试代码：
const sum = require('./sum');
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});在这段测试代码中，我们使用了 Jest 提供的 test 函数来定义一个测试用例，expect 函数来定义预期结果，toBe 函数来判断实际结果和预期结果是否相等。当测试用例运行时，Jest 会自动执行 sum 函数，并将其返回值与预期结果进行比较，如果相等则测试通过，否则测试失败。
运行测试用例
在编写完测试用例之后，我们可以使用以下命令来运行测试：
npx jest
Jest 会自动查找项目中所有的测试文件，并执行其中的测试用例。测试结果会显示在命令行中，例如：
PASS ./sum.test.js ✓ adds 1 + 2 to equal 3 (2ms)
在这个例子中，我们只有一个测试用例，且测试通过。
Jest 在前端项目中的应用
示例项目介绍
为了演示 Jest 在前端项目中的应用，我们来创建一个简单的 React 项目。首先，我们需要安装 React 和 React DOM：
npm install react react-dom
然后，我们可以创建一个名为 src 的目录，并在其中创建一个名为 App.js 的文件，其中包含一个简单的 React 组件：
-- -------------------- ---- -------
------ ----- ---- --------
-------- ----- -
------ -
-----
---------- ----------
------
--
-
------ ------- ----我们还需要在 src 目录中创建一个名为 index.js 的文件，用于将组件渲染到页面上：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));最后，我们需要在 HTML 文件中引入打包后的 JavaScript 文件：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
----------- ---------------
-------
------
---- ----------------
------- ------------------------------
-------
-------现在我们已经创建了一个简单的 React 项目，下面我们将使用 Jest 来测试它。
配置 Jest
在使用 Jest 测试前端项目之前，我们需要先配置 Jest。我们可以在项目根目录下创建一个名为 jest.config.js 的文件，用于配置 Jest：
module.exports = {
testEnvironment: 'jsdom',
moduleNameMapper: {
'\\.(css|less|scss|sass)$': 'identity-obj-proxy'
},
setupFilesAfterEnv: ['./src/setupTests.js']
};在这个配置文件中，我们指定了测试环境为 jsdom，用于模拟浏览器环境；使用 moduleNameMapper 将样式文件映射为一个空对象，避免在测试中出现样式相关的问题；使用 setupFilesAfterEnv 指定了一个名为 setupTests.js 的文件，用于在测试用例执行前执行一些初始化操作。
我们还需要在 package.json 文件中指定 Jest 的启动命令：
"scripts": {
"test": "jest"
}现在我们已经完成了 Jest 的配置，可以开始编写测试用例了。
编写测试用例
我们来编写一个测试用例，用于测试 App 组件是否能够正确地渲染到页面上。我们可以在 src 目录下创建一个名为 App.test.js 的文件，并编写以下测试代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ --- ---- -------- ------------- ------- ---------- -- -- - ----- --- - ------------------------------ -------------------- --- ----- ------------------------------------- ---
在这段测试代码中，我们使用了 ReactDOM.render 函数将 App 组件渲染到一个新创建的 div 元素中，并使用 ReactDOM.unmountComponentAtNode 函数将其卸载。如果组件能够正确地渲染到页面上并且能够被卸载，则测试通过。
运行测试用例
现在我们已经编写完了测试用例，可以使用以下命令来运行测试：
npm test
Jest 会自动查找项目中所有的测试文件，并执行其中的测试用例。测试结果会显示在命令行中，例如：
PASS src/App.test.js ✓ renders without crashing (30ms)
在这个例子中，我们只有一个测试用例，且测试通过。
总结
Jest 是一个功能强大、简单易用的 JavaScript 测试框架，可以帮助我们更好地保证前端项目的质量。在本文中，我们介绍了 Jest 的基本使用方法，并通过一个示例项目演示了 Jest 在前端项目中的应用。希望本文能够对你有所帮助，让你更好地掌握 Jest 的使用技巧。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/650697d495b1f8cacd260702