在 VSCode 中编写简单 JavaScript 测试用例的步骤和示例

步骤 1:创建项目文件夹

在你的工作区中创建一个新文件夹(例如 VSCode-js-test-demo)。

步骤 2:初始化项目

  1. 在 VSCode 中打开该文件夹。

  2. 打开终端 (Ctrl+`` 或 Terminal -> New Terminal`)。

  3. 运行命令初始化项目:

    bash 复制代码
    npm 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.

进阶:单独调试某个测试用例的返回值

如果你只想查看某一个测试用例的返回值,不需要运行全部用例,可以:

  1. 将目标测试用例的 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);
  });

});
  1. 运行 npm test,终端只会输出该用例的返回值和测试结果,更聚焦。
    总结

总结:

  1. 创建项目 npm init -y
  2. 安装测试框架 npm install --save-dev jest
  3. 编写功能代码 (math.js)
  4. 编写测试代码 (math.test.js),使用 describe, it, expect
  5. 配置 package.jsontest 脚本
  6. 运行测试 npm test

这样就完成了一个简单的 JavaScript 测试用例。你可以根据需要扩展功能函数和添加更多的测试用例。

相关推荐
烂蜻蜓23 分钟前
Flask入门教程(十):静态文件——CSS、JS与图片的正确管理方式
javascript·css·flask
Mr数据杨1 小时前
【Codex】用学生支持周报模块跟踪个性化支持进展
android·java·javascript·django·codex·项目开发
独立开发之道1 小时前
【three.js教程】Three.js 材质详解:从“不反光“到“物理级真实“怎么选
开发语言·javascript·材质
waillyer2 小时前
企业知识库智能问答 Agent(React + Nest)
javascript·redis·agent
程序员小远3 小时前
接口测试知识总结
自动化测试·软件测试·python·测试工具·职场和发展·测试用例·接口测试
Dovis(誓平步青云)4 小时前
模拟器横评:电脑上看小说、追短剧用什么模拟器?MuMu、雷电、腾讯手游助手实测
android·java·服务器·前端·javascript·电脑
测试秃头怪4 小时前
Postman中变量的使用
自动化测试·软件测试·python·测试工具·测试用例·接口测试·postman
salestina4 小时前
vscode迁移扩展目录
ide·vscode·编辑器
xiaominlaopodaren4 小时前
three.js最小地图运行时(十):接入离线逻辑瓦片剖面
javascript·gis·three.js
独立开发之道5 小时前
【Three.js教程】 图元速查:官方内置的立体图形
开发语言·javascript·ecmascript