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

相关推荐
Beginner x_u2 小时前
ES6 中的 class 是什么?和ES5构造函数差别是什么?
javascript·es6·class
魔都吴所谓2 小时前
【html】倒计时器实现demo
javascript·css·html
json{shen:"jing"}2 小时前
16_Vue引入路由配置 17.路由传递参数
前端·javascript·vue.js
机器视觉的发动机2 小时前
大语言模型:从理论起源到技术革命
前端·javascript·自动化·视觉检测·ecmascript·easyui·机器视觉
IT陈图图5 小时前
构建 Flutter × OpenHarmony 跨端带文本输入对话框示例
开发语言·javascript·flutter
奔跑的web.10 小时前
TypeScript 装饰器入门核心用法
前端·javascript·vue.js·typescript
阿蒙Amon11 小时前
TypeScript学习-第1章:入门
javascript·学习·typescript
winfredzhang11 小时前
实战复盘:如何用 HTML+JS+AI 打造一款“影迹”智能影视管理系统
javascript·html·json·加载·搜索·保存·电影接口
你知道“铁甲小宝”吗丶11 小时前
VSCode使用Claude Code(MCP服务)
vscode·ai·ai编程