news 2026/4/23 15:58:12

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
在 VSCode 中编写简单 JavaScript 测试用例的步骤和示例

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

步骤 2:初始化项目

  1. 在 VSCode 中打开该文件夹。
  2. 打开终端 (Ctrl+`` 或Terminal -> New Terminal`)。
  3. 运行命令初始化项目:
    npminit -y
    这会创建一个默认的package.json文件。

步骤 3:安装测试框架
选择一个测试框架安装。这里以流行的Jest为例:

npminstall--save-dev jest

(备选:你也可以选择Mocha+Chai等组合)

步骤 4:编写被测试的函数
创建一个文件math.js,写入一个简单的函数:

// math.jsfunctionadd(a,b){returna+b;}functionsubtract(a,b){returna-b;}module.exports={add,subtract};

步骤 5:编写测试用例
创建一个测试文件math.test.js(Jest 默认会查找*.test.js文件):

// math.test.jsconst{add,subtract}=require('./math');// 导入要测试的函数// 描述测试组 (通常描述被测试的功能模块)describe('数学函数测试',()=>{// 测试用例 1: 测试 add 函数it('应该正确计算两个数字的和',()=>{// 断言:调用 add(2, 3),预期结果是 5expect(result).toBe(5);expect(add(-1,1)).toBe(0);});// 测试用例 2: 测试 subtract 函数it('应该正确计算两个数字的差',()=>{// 断言:调用 subtract(5, 3),预期结果是 2expect(subtract(5,3)).toBe(2);expect(subtract(10,20)).toBe(-10);});});

步骤 6:配置package.json运行脚本
打开package.json,在"scripts"部分添加一个test命令:

{"name":"js-test-demo","version":"1.0.0","scripts":{"test":"jest"// 添加这行},"devDependencies":{"jest":"^29.7.0"}}

步骤 7:运行测试
在终端运行命令:

npmtest

预期输出:
你会看到类似下面的输出,表明两个测试用例都通过了:

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()(仅运行该用例):
// math.test.jsconst{add,subtract}=require('./math');// 导入要测试的函数// 描述测试组 (通常描述被测试的功能模块)describe('数学函数测试',()=>{test.only('应该正确计算两个数字的和',()=>{// 先接收返回值constresult=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 测试用例。你可以根据需要扩展功能函数和添加更多的测试用例。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/22 12:37:08

【毕业设计】基于微信小程序的古代天文知识科普系统设计与实现(源码+文档+远程调试,全bao定制等)

博主介绍:✌️码农一枚 ,专注于大学生项目实战开发、讲解和毕业🚢文撰写修改等。全栈领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战 ✌️技术范围:&am…

作者头像 李华
网站建设 2026/4/23 6:47:51

AI大模型本地部署:手把手带你在Mac本地部署运行AI大模型

在当前的技术环境下,大型语言模型(LLMs)已经成为人工智能领域的一个重要里程碑。这些模型能够在各种任务上展现出人类水平的性能,包括但不限于文本生成、语言理解和问题解答。随着开源项目的发展,个人开发者现在有机会…

作者头像 李华
网站建设 2026/4/23 10:47:06

html,生成一个五行五列的表格,第三列边框是红色,其余列边框是黑色

html,生成一个五行五列的表格,第三列边框是红色,其余列边框是黑色 要实现“第三列所有边框为红色”且“第二列右边框为红色”的效果,最稳妥的方式是分别对这两列进行独立设置。这样不仅能确保第三列的左边框显示为红色&#xff0c…

作者头像 李华
网站建设 2026/4/23 10:46:37

RAG 正在重塑未来:一文讲明白所有RAG概念!附带完整RAG实践过程

今天小编要给大家带来一个超级有趣又前沿的话题——RAG(Retrieval-Augmented Generation,检索增强型生成)。相信很多小伙伴听到这个名字可能会一头雾水,接下来就跟着小编从RAG概念、RAG分类、RAG基本流程、RAG实践、RAG评估和RAG优…

作者头像 李华
网站建设 2026/4/23 10:43:41

AbMole综述丨线粒体研究中的热门荧光染料、功能调节剂

线粒体是存在于真核细胞中的关键细胞器,它在细胞能量代谢、细胞衰老与凋亡、细胞分化和疾病发展中扮演重要角色。在研究线粒体的过程中,一系列工具化合物发挥了重要的作用,例如可对线粒体进行成像分析的荧光染料、阻断线粒体氧化磷酸化和能量…

作者头像 李华