在 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 测试用例。你可以根据需要扩展功能函数和添加更多的测试用例。

相关推荐
竹林81826 分钟前
用Viem替代ethers.js:从一次签名失败到完整迁移的实战记录
前端·javascript
π同学1 小时前
ESP-IDF+vscode开发ESP32第十一讲——LEDC
vscode·pwm·eps32
不可能的是2 小时前
Claude Code 子 Agent 机制全解:怎么跑起来、怎么被管理、怎么互不干扰
javascript
HSunR2 小时前
dify 搭建ai作业批改流
开发语言·前端·javascript
代码不加糖2 小时前
2026 跨境电商独立站实战:从 0 到 1 搭建高转化 SaaS 商城(附源码)
开发语言·前端·javascript
用户617517157014 小时前
关于普通函数和箭头函数的this
javascript
RPGMZ5 小时前
RPGMakerMZ 地图存档点制作 标题继续游戏直接读取存档
开发语言·javascript·游戏·游戏引擎·rpgmz·rpgmakermz
有一个好名字5 小时前
Agent Loop —— 一切从那个 while 循环开始
前端·javascript·chrome
EF@蛐蛐堂5 小时前
【js】浏览器滚动条优化组件OverlayScrollbars
开发语言·javascript·ecmascript
辰同学ovo6 小时前
从全局登录状态管理学习 Redux
前端·javascript·学习·react.js