前端UI组件【免费下载链接】handsontableJavaScript Data Grid / Data Table with a Spreadsheet Look Feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡项目地址https://gitcode.com/gh_mirrors/ha/handsontable点击查看免费下载Handsontable 是一个支持 React、Angular 和 Vue 的 JavaScript 数据网格Data Grid库。本文以仓库内 .claude/skills/handsontable-unit-testing/SKILL.md 为骨架结合handsontable/子包内的 Jest 配置、测试引导文件与真实测试样例系统讲解 Handsontable 核心、插件与工具函数的单元测试*.unit.js/*.unit.ts及 TypeScript 类型测试*.types.ts的编写规范。读完本文你将掌握单元测试与 E2E 测试的取舍原则、jest.config.js的模块别名机制、预置 mock 的使用方式、正确的运行命令与常见的假绿陷阱以及如何用真实赋值而非declare来验证生成类型声明的正确性。何时使用单元测试何时使用 E2EHandsontable 仓库中存在两套测试体系单元测试Jest 驱动文件命名为*.unit.js/*.unit.ts运行在jsdom环境中测试纯逻辑、工具函数与数据转换。E2E 测试新代码统一使用Playwright测试位于tests/e2e/见 skillhandsontable-playwright-e2e而文档中提到的handsontable()、selectCell()等全局函数是legacy Jasmine时代遗留的测试辅助不要再新增*.spec.js这类旧式测试文件。核心原则优先 E2E而非单元测试。判断标准非常直接——如果一个单元测试需要 mock 模块才能隔离被测代码那就应该改写成 E2E 测试。理由如下Mocking 会把测试与被测模块的内部结构紧密耦合使代码抗拒重构与扩展——每一次内部结构调整即使外部行为完全没变也会迫使测试跟着改动。据此可以给出清晰的边界适合单元测试纯逻辑、工具函数、数据转换、计算类代码——任何不需要 mock的代码。例如字符串格式化、坐标计算、数据过滤条件判断等。改用 E2EDOM 交互、渲染、浏览器事件、视觉行为以及任何为了隔离而必须 mock 模块的代码。反模式仅仅为了隔离就 mock 内部模块的单元测试。这类测试脆弱、抗拒重构是仓库明确禁止的做法。测试约定命名、位置、框架与导入Handsontable 单元测试的基础约定如下文件命名*.unit.js或*.unit.ts。Jest 通过testRegex同时识别两种后缀配置见 handsontable/jest.config.js 中的testRegex: \\.(unit\\.js|unit\\.ts)$。存放位置与源码同目录放在src/**/__tests__/目录下。例如 Filters 插件的测试位于 src/plugins/filters/tests/dataFilter.unit.ts核心类型的测试位于 src/tests/core/ 下。仓库源码中此类文件超过 200 个覆盖3rdparty/SheetClip、3rdparty/walkontable与src/plugins/*等大量模块。测试框架Jest jsdom环境 jest-jasmine2测试运行器testRunner: jest-jasmine2见 handsontable/jest.config.js。这意味着describe/it/expect等语法沿用 Jasmine 风格。显式导入单元测试中所有依赖都必须显式import。与 E2E 测试不同这里没有自动注入的全局变量如handsontable()、selectCell()。从源码结构看Jest 的roots被配置为src与test两个目录handsontable/jest.config.js因此单元测试与test/目录下的引导、mock 文件属于同一执行上下文。模块别名映射jest.config.js 的 moduleNameMapperJest 会自动解析以下别名handsontable/jest.config.js别名解析目标handsontable与handsontable/...src/与src/...walkontable与walkontable/...src/3rdparty/walkontable/src/与src/3rdparty/walkontable/src/...CSS/SCSS 导入test/__mocks__/styleMock.js返回空对象对应的映射规则为moduleNameMapper: { ^handsontable(.*)$: rootDir/src$1, ^walkontable(.*)$: rootDir/src/3rdparty/walkontable/src$1, \\.(css|scss)$: rootDir/test/__mocks__/styleMock.js, }这意味着单元测试可以直接import { someHelper } from handsontable/helpers而无需编写冗长的相对路径样式文件导入则会被静默替换为空对象避免css-loader依赖影响测试运行。预配置 Mockstest/bootstrap.js单元测试运行前会加载 handsontable/test/bootstrap.js通过setupFilesAfterEnv注入见 handsontable/jest.config.js。该引导文件自动提供以下能力ResizeObservermock实现见 handsontable/test/mocks/resizeObserverMock.js包含空实现的observe()/unobserve()/disconnect()。IntersectionObservermock实现见 handsontable/test/mocks/intersectionObserverMock.js同样提供空方法。Element.prototype.scrollIntoView的空实现jsdom 未实现该 API窗口滚动策略会在scrollViewportTo决定页面需要移动时调用它。jasmine.DEFAULT_TIMEOUT_INTERVAL 15000超时上限为 15 秒。自定义匹配器./helpers/custom-matchers与 Jasmine 辅助函数./helpers/jasmine-helpers后者通过exportToGlobal导出到全局。此外setupFiles还加载了 handsontable/test/cryptoSetup.js用于补齐crypto相关 API。test/__mocks__/目录下还包含cryptoPolyfill.js与cssPolyfill.js可供需要的场景使用。对于自定义 mock文档建议使用jest.fn()创建桩函数、jest.spyOn(object, method)监听已有方法而不应滥用模块级 mock。运行命令与两个假绿陷阱标准运行方式运行全部单元测试npm run test:unit --prefix handsontable按路径过滤运行pattern 会与测试文件路径匹配例如filters、ghostTable.unit、metaManagernpm run test:unit --prefix handsontable --testPathPatternregex示例npm run test:unit --prefix handsontable --testPathPatternfilters从 handsontable/scripts/tasks.json 的源码可以看到test:unit.jest任务的真实命令为cross-env-shell BABEL_ENVcommonjs env-cmd -f ../hot.config.js jest该任务被标记为interactive模式给 Jest 一个真实 TTY 以显示颜色与进度并通过passthroughFilter仅放行--testPathPattern、--watch、--coverage、--collectCoverageFrom、--coveragePathIgnorePatterns等 Jest 认识的参数明确阻止--random、--verbose等不受支持的标志。陷阱一--testPathPattern中绝不能出现|test:unit任务经由cross-env-shell运行整条命令行会被交给 shell 解释。因此npm run test:unit --prefix handsontable --testPathPatterna|b中的|会被 shell 当作管道符处理Jest 只运行a并打印自己的绿色汇总随后步骤以/bin/sh: b: command not found和退出码 127 失败。如果只grep汇总中的Tests:行看到的全是 pass缺失的测试套件完全不会被注意到。正确做法一次调用只传一个 pattern或者直接传入文件路径见下文。陷阱二裸npx jest不会运行任何测试在handsontable/目录下直接执行npx jest会得到看似正常的结果——因为缺少BABEL_ENVcommonjs每个文件都会解析失败Jest encountered an unexpected token而汇总却显示Tests: 0 total。这很容易被误读为没有失败从而让依赖grep ✕的突变检查mutation check形同虚设。正确做法在不构建样式的前提下运行指定文件请使用任务自身的命令BABEL_ENVcommonjs npx env-cmd -f ../hot.config.js jest src/plugins/a src/plugins/b并对照Test Suites:数量与你预期运行的文件数是否一致。大数据集测试当被测代码处理数据数组时文档要求包含5 万行以上的数据测试。填充数组时必须使用forEach循环const rows []; for (let i 0; i 50000; i) { rows.push({ id: i, name: user-${i} }); }绝不要使用arr.push(...largeArray)一次展开整个大数组——在规模较大时这会触发调用栈溢出stack overflow。这一约束与 Handsontable 作为数据网格需要处理海量行数据的定位直接相关单元测试应当模拟这种规模以暴露真实的性能与边界问题。测试结构示例一个标准的单元测试文件结构如下摘自 SKILL.mdimport { calculateSomething } from ../utils; describe(calculateSomething, () { it(should return the sum for positive inputs, () { expect(calculateSomething(2, 3)).toBe(5); }); it(should handle zero values, () { expect(calculateSomething(0, 0)).toBe(0); }); it(should throw for invalid input, () { expect(() calculateSomething(null)).toThrow(); }); });仓库中真实单元测试的写法与此一致。以 src/plugins/filters/tests/conditionRegisterer.unit.ts 和 src/plugins/filters/tests/dataFilter.unit.ts 为例它们直接 import 被测模块用describe/it/expect验证过滤条件注册与数据过滤的纯逻辑全程不依赖 DOM也不需要任何模块 mock——这正是文档所倡导的单元测试形态。常见错误清单为插件逻辑编写单元测试时需要规避以下高频错误为 DOM 或渲染行为写单元测试——这属于 E2E 的职责范围。只覆盖 happy path——必须覆盖边界条件、错误状态与异常输入。代码处理数组却跳过大数据集测试——参见上文 5 万行要求。忘记测试插件的updateSettings()以及enablePlugin()/disablePlugin()生命周期循环——插件逻辑的正确性往往体现在状态切换过程中。误用 E2E 辅助函数的全局变量handsontable()、selectCell()——这些在单元测试环境中并不存在会导致测试直接失败。TypeScript 类型测试验证生成声明的契约定位与文件模式类型测试*.types.ts用于在运行npm run build:types之后验证tmp/目录下生成的类型声明是否正确。它们同样位于src/**/__tests__/目录中与单元测试和 E2E 测试并列例如src/tests/core/core.types.tssrc/tests/core/namespace.types.ts注意绝不能把类型测试放在test/types/目录下——该目录只存放驱动编译的tsconfig.json见 handsontable/test/types/tsconfig.json其中的paths将handsontable、handsontable/base、handsontable/*分别映射到../../tmp、../../tmp/base、../../tmp/*并通过include: [../../src/**/*.types.ts]收集全部类型测试文件。运行方式node_modules/.bin/tsc --noEmit -p test/types/tsconfig.json仓库中对应的 npm 任务是npm run test:types --prefix handsontable底层任务定义见 handsontable/scripts/tasks.jsontsc -p ./test/types且依赖downlevel:types先生成声明文件。关键规则不用declare只用真实赋值每一行都必须是真实的const x: Type actualValue赋值语句让编译器基于生成的tmp/类型做可赋值性assignability检查。而declare let x: SomeType会完全绕过检查——它只声明不赋值编译器无法验证真实导出值与声明类型是否一致。src/tests/core/namespace.types.ts 文件头的注释点明了这一设计意图Tests use actual imported values assigned to namespace-typed variables. A compile error here means the namespace type alias disagrees with the real exported type, which is a regression in the generated declarations.同时覆盖 ESM 与 UMD 两种访问模式类型测试必须验证两种消费方式文档原文示例// ESM/modular: import from subpath, assign to namespace type import { DateEditor } from handsontable/editors; const _editor: Handsontable.editors.DateEditor new DateEditor(hot); // UMD/namespace: extract constructor from namespace object, instantiate it const EditorCtor Handsontable.editors.DateEditor; const _umdEditor: Handsontable.editors.DateEditor new EditorCtor(hot);仓库中的 namespace.types.ts 在UMD pattern段落中完整实践了这一模式从Handsontable.editors.DateEditor、Handsontable.plugins.AutoColumnSize、Handsontable.renderers.TextRenderer、Handsontable.validators.NumericValidator提取构造器并实例化以模拟 CDN/浏览器用户通过命名空间消费类型的运行时路径同时还在dom与helper命名空间段落中验证Handsontable.dom.addClass、Handsontable.helper.arrayEach等 API 被正确类型化而非unknown。负向断言ts-expect-error要证明内部符号没有被导出到公共 API使用ts-expect-error进行负向断言// ts-expect-error SelectionManager is not part of the public API import type { SelectionManager } from handsontable;一旦未来版本错误地导出了该符号ts-expect-error会因错误未出现而报错从而在编译期就捕获公共 API 的意外膨胀。进一步阅读handsontable/.ai/TESTING.md完整的测试策略说明注SKILL.md 引用的完整测试策略文档。handsontable/jest.config.jsJest 配置包括环境、别名映射、测试运行器与覆盖报告。handsontable/test/mocks/可用的 mock 实现styleMock.js、resizeObserverMock.js、intersectionObserverMock.js、cryptoPolyfill.js、cssPolyfill.js。handsontable/test/bootstrap.js测试引导与全局 mock 注入。handsontable/test/types/tsconfig.json类型测试的编译配置与tmp/路径映射。handsontable/scripts/tasks.jsontest:unit.jest等测试任务的真实命令与参数透传策略。单元测试示例handsontable/src/plugins/filters/tests/dataFilter.unit.ts类型测试示例handsontable/src/tests/core/namespace.types.ts。赞分享前端UI组件【免费下载链接】handsontableJavaScript Data Grid / Data Table with a Spreadsheet Look Feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡项目地址https://gitcode.com/gh_mirrors/ha/handsontable点击查看免费下载相关推荐类型安全与测试Flow类型检查与Jest单元测试框架类型安全与测试Flow类型检查与Jest单元测试框架 本文全面介绍了JavaScript项目中的类型安全与测试实践。首先详细讲解了Flow静态类型检查器的配置教程utterances单元测试Jest配置与测试用例编写utterances单元测试Jest配置与测试用例编写 单元测试现状分析 当前项目中未发现Jest配置文件及测试文件 .test.ts或.spec.ts p前端UI组件Streamlit Python 单元测试指南从测试编写规范到运行与类型检查实战Streamlit Python 单元测试指南从测试编写规范到运行与类型检查实战 本文以 Streamlit 仓库中的官方测试文档 lib/tests/AGE数据可视化后端前端上一篇Mininet扩展开发终极指南为SDN网络模拟器贡献代码的完整流程下一篇iii Worker 深入解析基于 WebSocket 的进程注册模型、活路由表与故障隔离机制创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考