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

相关推荐
Listen·Rain2 小时前
Vue3中组件间通信详解
前端·javascript·vue.js
Listen·Rain2 小时前
Vue3中customRef详解
前端·javascript·vue.js
香芋芋圆2 小时前
国内常用坐标系全解析与WebGIS框架实战指南(Cesium/Mapbox/Leaflet避坑手册)
前端·javascript
sugar__salt2 小时前
Document 切割:RAG 知识库数据预处理实战
javascript·langchain·embedding·js·rag·cheerio
小粉粉hhh2 小时前
React(三)——Redux
前端·javascript·react.js
多加点辣也没关系3 小时前
JavaScript|第24章:事件循环与并发模型
开发语言·javascript·ecmascript
BIM云平台开发4 小时前
【App.vue里跟踪页面跳转和用户ID】
开发语言·前端·javascript
云空5 小时前
《Three.js 完整版3D魔方:带贴纸+中心固定+自动求解复原》
前端·javascript·3d·three.js
gis开发之家5 小时前
《Vue3 从入门到大神33篇》Vue3 源码详解(三):响应式核心思想——从 Object.defineProperty 到 Proxy
前端·javascript·vue.js·vue3·vue3源码
云空6 小时前
《Three.js 可操控3D魔方(键盘转动+打乱+复原)》
javascript·学习·游戏·3d·three.js