给你的 vscode 扩展增加测试设置

文章目录

  • 1. 目的
  • 2. vitest 作为 vscode 扩展单元测试
  • 3. vscode-test 集成测试
  • 4. 自定义 Runner 集成测试
  • 5. 小结

1. 目的

vscode 作为当前最多人使用的编辑器和开发工具,其最强大之处就是有成熟的插件社区,但是使用过程中难免就会遇到插件功能不够称心或者插件不维护的情况。

随着 typescript 的越来越普及,很多人都会 ts,那为何不自己开发或者二次开发称心如意的插件呢?而插件的开发就需要测试,手工测试难免遗漏,那就给 vscode 扩展加上单元、集成测试吧。

Mocha 作为 vscode 官方测试工具 vscode-test 的默认框架,必须编译成 js 后才可以测试,我是不大爽的,奈何 vscode 扩展集成测试必须使用它,但是单元测试可以使用 jest / vitest 直接来测试 ts 代码。

本文使用插件 【turbo-file-header】 仓库作用示例来讲解 vitest 作为 vscode 扩展单元测试、vscode-test 集成测试、mocha 自定义脚本集成测试。

2. vitest 作为 vscode 扩展单元测试

单元测试使用 .spec.ts 作为测试文件和后缀集成测试区分开来。使用 jest-mock-vscode npm 包来整合 vitest,其使用说明我不再作详细说明,我这里列一下我的 vite.config.ts 配置:

vite.config.ts

/// <reference types="vitest" />
import path from 'path';import { defineConfig } from 'vite';export default defineConfig({plugins: [],resolve: {alias: [{find: /^~(.+)/,replacement: path.join(process.cwd(), 'node_modules/$1'),},{find: /^@\/(.+)/,replacement: path.join(process.cwd(), 'src/$1'),},],},test: {include: ['src/test/unit/**/*.spec.ts'],coverage: {exclude: ['node_modules', 'out', 'src/test', 'src/typings', '.vscode-test'],},},
});

package.json scripts 设置:

    "test:unit": "vitest unit --watch=false","test:coverage": "vitest run --coverage",

tsconfig.json 中的别名设置:

    "paths": {"@/*": ["src/*"]},

3. vscode-test 集成测试

集成测试使用 .test.ts 作为测试文件后缀和集成测试区分开来。vscode-test-cli 配置我不再作详细说明,这里列一下 .vscode-test.mjs 配置中的 mocha 别名支持 require 配置,当然要安装 ts-node tsconfig-paths 这两个 npm 包。

    mocha: {ui: 'bdd',require: ['ts-node/register', 'tsconfig-paths/register'],},

断点调试的 launch.json 配置:(因为 .vscode-test.mjslaunchArgs 配置,断点配置以 args 为准,为了不冲突,建议单独弄一个配置,我这里使用 .vscode-test-debug.mjs )

launch.json:

    {"name": "Test: e2e","type": "extensionHost","request": "launch","runtimeExecutable": "${execPath}","testConfiguration": "${workspaceFolder}/.vscode-test-debug.mjs","args": ["${workspaceFolder}/sampleWorkspace/test.code-workspace","--extensionDevelopmentPath=${workspaceFolder}","--disable-extensions"],"env": {"mode": "debug","TS_NODE_PROJECT": "${workspaceFolder}/tsconfig.json"},"preLaunchTask": "npm: test-compile","sourceMaps": true},

package.json scripts 设置:(扩展编译是使用的 esbuild 设置的 compile 命令,测试文件使用 tsc 编译)

    "clean": "rimraf out/","test-compile": "npm run clean && tsc -p ./ && npm run compile","test": "npm run test-compile && vscode-test",

4. 自定义 Runner 集成测试

根据官方说明设置自定义 Runner 和我的仓库示例,跟着配置即可。这里列一下我的断点配置:

launch.json:

    {"name": "Test: e2e use mocha","type": "extensionHost","request": "launch","runtimeExecutable": "${execPath}","args": ["${workspaceFolder}/sampleWorkspace/test.code-workspace","--disable-extensions","--extensionDevelopmentPath=${workspaceFolder}","--extensionTestsPath=${workspaceFolder}/out/test/suite/index"],"env": {"NODE_ENV": "test","TS_NODE_PROJECT": "${workspaceFolder}/tsconfig.json"},"outFiles": ["${workspaceFolder}/out/test/**/*.js"],"preLaunchTask": "npm: test-compile","sourceMaps": true},

package.json scripts 设置:(扩展编译是使用的 esbuild 设置的 compile 命令,测试文件使用 tsc 编译)

    "clean": "rimraf out/","test-compile": "npm run clean && tsc -p ./ && npm run compile","test:suite:mocha": "npm run test-compile && node out/test/runTests.js",

5. 小结

因为是使用真实实例作集成测试,感觉性能有些低,有些操作要等待点时间才能得到正确结果,所以测试文件中可以考虑适当加个 sleep 函数(timtout 等待)来等待正确结果。

期待以后的版本可以使用 jest 或者 vitest 代替 mocha 集成测试。

参考资料:

[1] https://code.visualstudio.com/api/working-with-extensions/testing-extension
[2] https://github.com/microsoft/vscode-test-cli
[3] https://github.com/microsoft/vscode-extension-samples/tree/main/helloworld-test-cli-sample
[4] https://github.com/microsoft/vscode-extension-samples/tree/main/helloworld-test-sample
[5] https://github.com/streetsidesoftware/jest-mock-vscode
[6] https://github.com/prettier/prettier-vscode
[7] https://github.com/ygqygq2/turbo-file-header

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/817390.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python 内置函数 format() 详解

在 Python 中&#xff0c;format() 是一个内置函数&#xff0c;用于格式化字符串。它提供了灵活的方式来将变量插入到字符串中&#xff0c;并控制它们的显示格式。让我们深入了解一下这个函数的用法、参数、示例以及注意事项。 1. format() 函数概述 format() 函数是 Python …

SPI 设备驱动编写流程:SPI 设备数据收发处理流程

一. 简介 前面一篇文章学习了SPI设备驱动数据收发过程中&#xff0c;涉及的结构体与函数&#xff0c;文章如下&#xff1a; SPI 设备驱动编写流程&#xff1a;SPI 设备数据收发处理流程中涉及的结构体与函数-CSDN博客 本文学习SPI设备驱动中数据收发处理过程。 二. SPI 设备…

P8649 [蓝桥杯 2017 省 B] k 倍区间(同余定理)

# [蓝桥杯 2017 省 B] k 倍区间 ## 题目描述 给定一个长度为 $N$ 的数列&#xff0c;$A_1,A_2, \cdots A_N$&#xff0c;如果其中一段连续的子序列 $A_i,A_{i1}, \cdots A_j(i \le j)$ 之和是 $K$ 的倍数&#xff0c;我们就称这个区间 $[i,j]$ 是 $K$ 倍区间。 你能求出数列…

ThreadX在STM32上的移植:通用启动文件tx_initialize_low_level.s

在嵌入式系统开发中&#xff0c;实时操作系统&#xff08;RTOS&#xff09;的选择对于系统性能和稳定性至关重要。ThreadX是一种广泛使用的RTOS&#xff0c;它以其小巧、快速和可靠而闻名。在本文中&#xff0c;我们将探讨如何将ThreadX移植到STM32微控制器上&#xff0c;特别是…

#381. 四边形继承练习

太爽了 甚至还现学了叉积判断线段是否相交和求面积的方法 先给出我的代码&#xff1a; #include <iostream> #include <vector> #include <iomanip> #include <cmath>using namespace std;//下面需要补充多个类的声明及实现代码 const double EPS 1…

创新营销利器:淘宝扭蛋机小程序开发全解析

在数字化浪潮的推动下&#xff0c;淘宝扭蛋机小程序的开发成为了一种全新的购物体验。它巧妙地将传统扭蛋机的乐趣与移动技术的便捷相结合&#xff0c;为用户带来了前所未有的惊喜与互动。 淘宝扭蛋机小程序的开发&#xff0c;不仅是一次技术的革新&#xff0c;更是一次购物方…

【基于HTML5的网页设计及应用】——事件代理.

&#x1f383;个人专栏&#xff1a; &#x1f42c; 算法设计与分析&#xff1a;算法设计与分析_IT闫的博客-CSDN博客 &#x1f433;Java基础&#xff1a;Java基础_IT闫的博客-CSDN博客 &#x1f40b;c语言&#xff1a;c语言_IT闫的博客-CSDN博客 &#x1f41f;MySQL&#xff1a…

gcn代码处理出现的问题

README 版本不一致 python 2.7 PYTHON 3.7 切换 TensorFlow系统的学习使用 数据集下载

每个人都可以做一个赚钱的社群

如何创建并运营一个赚钱的社群 一、引言 大家好&#xff0c;今天&#xff0c;我想和大家分享一下如何创建并运营一个赚钱的社群。我的分享目的是希望能够持续输出有价值的内容。 二、心态建设 1. 重要性&#xff1a;创业心态与平常心 在开始社群运营之前&#xff0c;我们需…

在线知识库如何从零开始搭建?这篇文章来教你!

引言&#xff1a; 有没有想过把那些零散在脑海中的点点滴滴整理起来&#xff0c;建立一个属于自己的在线知识库&#xff1f;无论是个人学习&#xff0c;团队协作&#xff0c;还是企业管理&#xff0c;一个良好的知识库都能帮我们更高效地存储和分享知识。如果你还在为“怎么建知…

持续上榜!赛宁网安多项能力入选《中国网络安全行业全景图》

4月12日&#xff0c;国内网安咨询机构安全牛正式发布《中国网络安全行业全景图》第十一版。赛宁网安凭借在网络安全领域前沿的技术创新优势、丰富的实践经验积累以及专业的综合安全服务&#xff0c;入选此次全景图安全支撑技术与体系的安全靶场领域、安全管理与运营的BAS领域和…

hierarchy-utils 通用树形数据工具库

通用树形数据工具库 hierarchy-utils链接地址使用示例数据结构 - 菜单数据源1.通过原数据结构返回树形数据2.通过转换数据结构&#xff08;Map / JSONObject&#xff09;返回树形数据3.返回源数据列表中id为rootId的元素或pid为rootId且id能整除2的全部子元素的数据列表 &#…

docker特殊问题处理3——docker-compose安装配置nacos

最近几年随着大数据和人工智能持续大热&#xff0c;容器化安装部署运维已经走进了各个中小公司&#xff0c;也得已让众多开发者能上手实际操作&#xff0c;不过说真心话&#xff0c;“万物皆可容器化”的理念越来越深入人心。 而如何使用docker-compose安装&#xff0c;配置&a…

Windows下安装GPU版Pytorch

升级Driver到最新版本 Windows搜索栏中输入设备管理器找到显示适配器一项&#xff0c;点击展开&#xff0c;你将看到你的NVIDIA显卡列在其中右键点击你的NVIDIA显卡&#xff0c;选择更新驱动软件…。在弹出的对话框中&#xff0c;选择自动搜索更新的驱动软件。之后&#xff0c…

html--烟花3

html <!DOCTYPE html> <html> <head> <meta charset"UTF-8"> <title>Canvas烟花粒子</title> <meta name"keywords" content"canvas烟花"/> <meta name"description" content"can…

股票开户佣金最低多少?万一!A股开户多少钱合适?

开户佣金 通常情况下&#xff0c;股票开户佣金只要在达成交易的前提才收手续的费用&#xff0c;即买入和卖出的时候。目前&#xff0c;国规定收取最高佣金的比例为千分之三。 也就是说&#xff0c;最高为成交金额的3%&#xff0c;一般都会小于这个比例。最低交易佣金是5元起&a…

前端面试01总结

1.Js 中!x为true 时,x可能为哪些值 答: 1.false&#xff1a;布尔值false 2.0或-0&#xff1a;数字零 3.""或’或 &#xff08;空字符串&#xff09;&#xff1a;长度为0的字符串 4.null&#xff1a;表示没有任何值的特殊值 5.undefined&#xff1a;变量未定义时的默认…

如何为不同内容主题选择最适合的移动滑轨屏方案?

在数字化信息时代背景下&#xff0c;多媒体互动装置作为当前内容展示的常用手段&#xff0c;颇受大众的喜爱&#xff0c;比如应用在展厅、商业推广、活动会议等领域的滑轨屏&#xff0c;便是其中一种新颖的互动展示装置&#xff0c;并且它还能根据不同的内容主题&#xff0c;来…

java中的正则表达式匹配

匹配单个字符 \d&#xff1a;匹配一个数字字符。 \w&#xff1a;匹配一个字母、数字或下划线字符。 \s&#xff1a;匹配一个空白字符&#xff08;空格、制表符、换行符等&#xff09;。 .&#xff1a;匹配除换行符外的任意字符。量词 *&#xff1a;匹配前一个元素零次或多次。 …

2024年文化、历史与人文艺术与社会发展国际会议(CHHASD2024)

2024年文化、历史与人文艺术与社会发展国际会议(CHHASD2024) 会议简介 2024年国际文化、历史、人文、艺术与社会发展会议&#xff08;CHHASD2024&#xff09;将在中国武汉举行&#xff0c;主题为“文化、历史&#xff0c;人文、艺术和社会发展”。CHHASD2024汇集了来自世界各…