ASP.NET Core SignalR TypeScript 客户端单元测试完全指南Jest 运行、过滤与调试【免费下载链接】aspnetcoreASP.NET Core is a cross-platform .NET framework for building modern cloud-based web applications on Windows, Mac, or Linux.项目地址: https://gitcode.com/GitHub_Trending/as/aspnetcoreASP.NET Core SignalR 的 JavaScript/TypeScript 客户端microsoft/signalr与microsoft/signalr-protocol-msgpack使用 Jest 官方文档系统讲解如何在clients/ts目录下构建库、运行全部/部分/单个测试以及在 Visual Studio Code 中调试测试用例。读完本文你将掌握 SignalR TypeScript 客户端单元测试的完整命令集、Jest 的文件名与-t过滤技巧以及基于 VS Code 的断点调试工作流。一、测试框架与前置条件SignalR 的 TypeScript 客户端单元测试建立在以下技术栈之上Jest测试运行器与断言框架当前仓库 package.json 中锁定jest^29.5.0ts-jestJest 的 TypeScript 预处理器自动完成类型检查与转译省去单独的编译步骤jest-jasmine2以 Jasmine 2 风格运行测试的 runner见 jest.config.js 中testRunner: jest-jasmine2因此测试代码使用describe/it的 Jasmine 风格组织types/jest / types/node为测试代码提供类型定义。在开始之前需要满足两个前置条件已安装Node.js自上次clean之后至少运行过一次./build.cmd /t:Restore确保仓库的构建基础设施包括 npm 依赖还原就绪。注意文档中给出的构建命令./build.cmd /t:Restore是 Windows 环境写法Linux/macOS 下对应脚本为仓库根目录的 restore.sh或./build.sh视仓库构建脚本而定请根据实际运行环境选用。所有命令都必须从clients/ts目录即 src/SignalR/clients/ts下执行因为 npm 脚本与 Jest 配置均以该目录为工作根目录。测试的组织方式从仓库源码看单元测试按包划分为两个测试目录signalr/tests核心客户端microsoft/signalr的测试覆盖AbortSignal、HttpConnection、HubConnection、HubConnectionBuilder、JsonHubProtocol、LongPollingTransport、WebSocketTransport、ServerSentEventsTransport、TextMessageFormat、UserAgent等主题signalr-protocol-msgpack/testsMessagePack 协议扩展包microsoft/signalr-protocol-msgpack的测试包含BinaryMessageFormatter.test.ts与MessagePackHubProtocol.test.ts。测试文件统一采用*.test.ts命名例如 AbortSignal.test.ts、JsonHubProtocol.test.ts。Jest 的匹配规则定义在 jest.config.js 的testRegex(/__tests__/.*|(\.|/)(test|spec))\.(jsx?|tsx?)$即命中.test.ts/.spec.ts等模式的文件才会被当作测试执行。二、运行测试前先构建库SignalR 的单元测试会直接引用打包产物。在 jest.config.js 中可以看到一个关键映射moduleNameMapper: { ^microsoft/signalr$: rootDir/signalr/dist/cjs/index.js }也就是说测试代码中import { ... } from microsoft/signalr实际解析到signalr/dist/cjs/index.js——这是npm run build生成的 CommonJS 打包产物。因此每次修改库源码后都必须先重新构建再运行测试否则测试运行的仍是旧的构建结果。在clients/ts目录下执行 npm run build该命令会构建microsoft/signalr与microsoft/signalr-protocol-msgpack两个库底层通过 webpack/tsc 完成相关配置见 webpack.config.base.js 与 tsconfig.base.json。同时npm run build也会在signalr/dist/cjs下产出 Jest 所需的 CommonJS 入口。三、运行全部测试在clients/ts目录下执行 npm test该命令实际调用的是jest --config ./jest.config.js见 package.json 中的test脚本。在进入 Jest 之前pretest钩子还会先运行 ESLint 对两个测试目录做静态检查pretest: npm run lint-signalr npm run lint-signalr-msgpacknpm test会运行两个包的全部*.test.ts文件并在终端输出每个套件/用例的通过情况。此外 package.json 还提供了覆盖率脚本npm run coverage等价于jest --config ./jest.config.js --coverage需要度量代码覆盖率时可使用它。测试结果默认输出到终端同时 jest.config.js 配置了jest-junitreporter会把 JUnit 格式的结果写入../../../../artifacts/log/platform.signalr.junit.xml即仓库根目录的 artifacts/log 下便于 CI 集成。四、运行特定文件中的全部测试npm test接受附加参数并透传给 Jest npm test -- FileName其中FileName可以是路径的一个子串Jest 会运行路径中包含该子串的所有测试文件。文档强调即使在 Windows 上路径分隔符也请使用/因为参数最终由 Node 解析。官方文档给出的示例均基于clients/ts目录命令运行范围npm test -- signalr/testsclients\ts\signalr\tests下的全部测试npm test -- signalr-protocol-msgpack/testsclients\ts\signalr-protocol-msgpack\tests下的全部测试npm test -- signalr/tests/clients\ts\signalr\tests下的全部测试尾部斜杠写法同样有效npm test -- signalr/tests/JsonHubProtocolsignalr/tests/JsonHubProtocol.test.tsnpm test -- JsonHubProtocol同样运行signalr/tests/JsonHubProtocol.test.ts因为它是唯一匹配该子串的测试文件由此可见文件过滤是“子串包含”匹配而非“前缀/后缀”匹配JsonHubProtocol与signalr/tests/JsonHubProtocol都能命中同一文件。实际仓库中该文件为 JsonHubProtocol.test.ts其中包含对 Invocation 消息读写、Date 参数序列化、headers 传递、消息轮询等场景的断言。五、运行单个测试运行单个测试有两种方式各有适用场景。方式一.only临时标记最简单Jest 支持在it上追加.only被标记的用例会成为该文件中唯一运行的测试。官方文档的示例describe(A suite of tests, () { describe(A sub-suite of tests, () { it.only(will run, () { }); it(will not run, () { }); }); describe(Another sub-suite of tests, () { it(will not run either, () { }); }); });注意两点若同时运行多个文件例如不带参数直接npm test其他文件中的测试仍然会照常运行.only只对所在文件生效调试完务必移除.only避免后续提交时误伤其他用例。方式二-t参数按名称过滤无需改代码Jest 的-t参数接收一个子串模式用于匹配测试的完整名称由describe名称 it名称拼接而成。为了加快执行速度官方建议把-t与文件路径过滤参数配合使用。以官方文档中的示例代码该示例与仓库真实文件 AbortSignal.test.ts 结构一致为例describe(AbortSignal, () { describe(aborted, () { it(is false on initialization, () { // ... }); it(is true when aborted, () { // ... }); }); describe(onabort, () { it(is called when abort is called, () { // ... }); }); });对应命令与运行结果命令运行的测试npm test -- AbortSignal -t AbortSignal abortedAbortSignal aborted is false on initialization和AbortSignal aborted is true when abortednpm test -- AbortSignal -t is called when abort is calledAbortSignal onabort is called when abort is called第一条命令中AbortSignal把文件过滤到 AbortSignal.test.ts-t AbortSignal aborted匹配名称中同时包含这两个词的用例外层describe(AbortSignal) 内层describe(aborted)组合成前缀AbortSignal aborted。第二条命令的-t子串只命中onabort子套件中的it(is called when abort is called)因为其完整名称为AbortSignal onabort is called when abort is called。对比两种方式.only需要修改测试源码、适合快速聚焦单个用例-t不动源码、适合按名称模式批量筛选二者可以组合使用例如在文件中标记.only再用 VS Code 的“Jest - Current File”调试。六、在 Visual Studio Code 中调试测试仓库文档提供了两种开箱即用的 VS Code 调试配置无需手动编写launch.json。调试全部测试打开 VS Code 左侧的Run and Debug调试面板在顶部的配置下拉框中选择Jest - All点击播放按钮或直接按F5。该配置会在调试器下运行全部单元测试适合全局回归排查。调试当前文件中的全部测试打开 VS Code 左侧的Run and Debug调试面板在顶部的配置下拉框中选择Jest - Current File点击播放按钮或直接按F5。该配置只运行当前打开的编辑器文件中的测试配合.only即可精确调试单个用例。官方文档特别提醒将 Jest - Current File 与.only搭配使用是调试单个测试的最便捷方式。提示仓库内未在clients/ts下发现.vscode/launch.json上述两个配置由仓库的 VS Code 任务/调试基础设施提供该文档即为其权威说明。若你的环境中未出现这两个配置项可确认已通过仓库构建脚本完成 VS Code 工作区设置或参照 Jest 官方文档配置等价调试参数。七、调试定位的源码参考当某个测试失败时可以借助以下仓库路径快速定位被测实现与相关测试形成“源码—测试”对照核心客户端源码目录src/SignalR/clients/ts/signalr/src包含HubConnection、HttpConnection、JsonHubProtocol、各传输实现等核心客户端测试目录src/SignalR/clients/ts/signalr/testsMessagePack 协议包源码src/SignalR/clients/ts/signalr-protocol-msgpack/src对应测试在 src/SignalR/clients/ts/signalr-protocol-msgpack/tests与单元测试配套的还有浏览器端功能测试文档 JSFunctionalTests.md用于端到端验证传输与协议在真实浏览器中的行为。八、常见问题与最佳实践改了源码但测试结果没变多半是忘记先执行npm run build。由于moduleNameMapper指向signalr/dist/cjs/index.js不重新构建就无法验证最新代码。过滤条件不生效确认FileName是路径子串且使用/分隔符-t的子串需与describeit拼接后的完整名称匹配。提交前清理.only.only是临时调试标记遗留到 CI 会导致大量用例被跳过。充分利用类型检查tsconfig.jest.json 继承 tsconfig.base.json开启strict与noImplicitAny等严格选项测试代码同样享受完整类型检查遇到编译错误时先修类型再跑测试。九、命令速查表目的命令在clients/ts目录下构建库改源码后必跑npm run build运行全部测试npm test运行某路径下的全部测试npm test -- signalr/tests运行单个测试文件npm test -- JsonHubProtocol按名称子串运行指定文件内的用例npm test -- AbortSignal -t AbortSignal aborted生成覆盖率报告npm run coverage调试全部测试VS Code选择 Jest - All 后按 F5调试当前文件测试VS Code选择 Jest - Current File 后按 F5建议配合.only按照上述流程你可以从“改代码 →npm run build→npm test -- 过滤→ 断点调试”的完整闭环中高效迭代 SignalR TypeScript 客户端的开发与验证工作。【免费下载链接】aspnetcoreASP.NET Core is a cross-platform .NET framework for building modern cloud-based web applications on Windows, Mac, or Linux.项目地址: https://gitcode.com/GitHub_Trending/as/aspnetcore创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考