步骤 1:创建项目文件夹
在你的工作区中创建一个新文件夹(例如 VSCode-js-test-demo)。
步骤 2:初始化项目
-
在 VSCode 中打开该文件夹。
-
打开终端 (
Ctrl+`` 或Terminal -> New Terminal`)。 -
运行命令初始化项目:
bashnpm init -y这会创建一个默认的
package.json文件。
步骤 3:安装测试框架
选择一个测试框架安装。这里以流行的 Jest 为例:
bash
npm install --save-dev jest
(备选:你也可以选择 Mocha + Chai 等组合)
步骤 4:编写被测试的函数
创建一个文件 math.js,写入一个简单的函数:
javascript
// math.js
function add(a, b) {
return a + b;
}
function subtract(a, b) {
return a - b;
}
module.exports = { add, subtract };
步骤 5:编写测试用例
创建一个测试文件 math.test.js (Jest 默认会查找 *.test.js 文件):
javascript
// math.test.js
const { add, subtract } = require('./math'); // 导入要测试的函数
// 描述测试组 (通常描述被测试的功能模块)
describe('数学函数测试', () => {
// 测试用例 1: 测试 add 函数
it('应该正确计算两个数字的和', () => {
// 断言:调用 add(2, 3),预期结果是 5
expect(result).toBe(5);
expect(add(-1, 1)).toBe(0);
});
// 测试用例 2: 测试 subtract 函数
it('应该正确计算两个数字的差', () => {
// 断言:调用 subtract(5, 3),预期结果是 2
expect(subtract(5, 3)).toBe(2);
expect(subtract(10, 20)).toBe(-10);
});
});
步骤 6:配置 package.json 运行脚本
打开 package.json,在 "scripts" 部分添加一个 test 命令:
json
{
"name": "js-test-demo",
"version": "1.0.0",
"scripts": {
"test": "jest" // 添加这行
},
"devDependencies": {
"jest": "^29.7.0"
}
}
步骤 7:运行测试
在终端运行命令:
bash
npm test
预期输出:
你会看到类似下面的输出,表明两个测试用例都通过了:
PASS ./math.test.js
数学函数测试
✓ 应该正确计算两个数字的和 (2 ms)
✓ 应该正确计算两个数字的差
Test Suites: 1 passed, 1 total
Tests: 2 passed, 2 total
Snapshots: 0 total
Time: 0.123 s
Ran all test suites.
进阶:单独调试某个测试用例的返回值
如果你只想查看某一个测试用例的返回值,不需要运行全部用例,可以:
- 将目标测试用例的 test() 改为 test.only()(仅运行该用例):
javascript
// math.test.js
const { add, subtract } = require('./math'); // 导入要测试的函数
// 描述测试组 (通常描述被测试的功能模块)
describe('数学函数测试', () => {
test.only('应该正确计算两个数字的和', () => {
// 先接收返回值
const result = add(2, 3);
// 打印具体返回值(标注场景便于识别)
console.log('【应该正确计算两个数字的和】返回值:', result);
expect(result).toBe(5);
});
});
- 运行 npm test,终端只会输出该用例的返回值和测试结果,更聚焦。
总结
总结:
- 创建项目
npm init -y - 安装测试框架
npm install --save-dev jest - 编写功能代码 (
math.js) - 编写测试代码 (
math.test.js),使用describe,it,expect等 - 配置
package.json的test脚本 - 运行测试
npm test
这样就完成了一个简单的 JavaScript 测试用例。你可以根据需要扩展功能函数和添加更多的测试用例。