本文へ移動
cccskills
無料GitHub で公開

handsontable-unit-testing

Use when writing or modifying Jest unit tests (*.unit.js or *.unit.ts) or TypeScript type tests (*.types.ts) for Handsontable core, plugins, or utilities, or when a bug fix or internal refactor needs unit or type test coverage - covers Jest setup, test location conventions, mocking patterns, module aliases, type test patterns (no declare, real assignments, ESM + UMD patterns), and when to choose unit tests over E2E tests

インストール方法を見る

含まれるファイル(1)

  • SKILL.md4.7 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Writing Jest Unit Tests for Handsontable

Unit vs E2E

"E2E" means a new Playwright test in tests/e2e/ (skill handsontable-playwright-e2e). The handsontable() / selectCell() globals are legacy Jasmine helpers, unavailable in unit tests; add no new *.spec.js.

Favor E2E: a unit test that needs a mocked module becomes an E2E test, because module mocks couple tests to internal shape and block refactoring.

  • Unit candidates: pure logic, utilities, data transformations, calculations (no mocking).
  • E2E: DOM interaction, rendering, browser events, visual behavior.

Conventions

  • File naming: *.unit.js or *.unit.ts (testRegex in handsontable/jest.config.js).
  • Location: src/**/__tests__/ beside the source (e.g. src/plugins/filters/__tests__/dataFilter.unit.ts).
  • Framework: Jest, jsdom, jest-jasmine2 runner. Import everything explicitly.
  • Aliases: 'handsontable' and 'handsontable/...' resolve to src/; 'walkontable' and 'walkontable/...' to src/3rdparty/walkontable/src/; CSS/SCSS to test/__mocks__/styleMock.js.
  • test/bootstrap.js provides ResizeObserver (test/__mocks__/resizeObserverMock.js) and IntersectionObserver (test/__mocks__/intersectionObserverMock.js) mocks. Other mocking: jest.fn(), jest.spyOn(object, 'method').

Run commands

  • All: npm run test:unit --prefix handsontable
  • Targeted: npm run test:unit --prefix handsontable --testPathPattern=<regex> (matched against test file paths, e.g. filters, ghostTable.unit, metaManager)

Two ways a unit run reports green while testing nothing

  • One pattern per --testPathPattern call. test:unit.jest runs through cross-env-shell, so --testPathPattern=a|b becomes a shell pipe: Jest runs a, prints a green summary, then fails with /bin/sh: b: command not found (exit 127), and a grep on Tests: shows only passes. Run one pattern per call, or pass file paths directly. (The Puppeteer test:e2e runner carries its pattern in an environment variable and is unaffected.)
  • Run files with the task's own command. A bare npx jest from handsontable/ fails to parse every file ("Jest encountered an unexpected token") without BABEL_ENV=commonjs and prints Tests: 0 total, which a mutation check grepping for ✕ reads as no failures. Without the styles build use: BABEL_ENV=commonjs npx env-cmd -f ../hot.config.js jest src/plugins/a src/plugins/b and compare the Test Suites: count with the number of files you expected.

Large datasets

For code that handles data arrays, include 50k+ row tests. Populate with forEach; arr.push(...largeArray) overflows the stack.

Edge cases

Cover edge cases, error states, and boundaries beyond the happy path. For plugin logic, test updateSettings() and enablePlugin()/disablePlugin() cycles.

import { calculateSomething } from '../utils';

describe('calculateSomething', () => {
  it('should return the sum for positive inputs', () => {
    expect(calculateSomething(2, 3)).toBe(5);
  });
});

TypeScript type tests

*.types.ts files verify the generated declarations in tmp/ after npm run build:types. They live in src/**/__tests__/ (e.g. src/__tests__/core/core.types.ts, src/__tests__/core/namespace.types.ts); test/types/ holds only the tsconfig.json that drives compilation.

Run: node_modules/.bin/tsc --noEmit -p test/types/tsconfig.json

Write every line as a real const x: Type = actualValue assignment so the compiler checks assignability against tmp/; declare let x: SomeType bypasses the check.

Cover both access patterns:

// 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);

Negative assertions use @ts-expect-error to prove internal symbols are not exported:

// @ts-expect-error SelectionManager is not part of the public API
import type { SelectionManager } from 'handsontable';

Further reading

handsontable/.ai/TESTING.md, handsontable/jest.config.js, handsontable/test/__mocks__/, handsontable/test/bootstrap.js.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Use when developing or modifying the @handsontable/angular-wrapper package - Angular components with decorators, NgZone performance optimization, and ng-packagr build system

日本語の概要は準備中です。原文の説明を表示しています。

handsontable/handsontable2.2万2026年10月12日 更新

Use when testing a local or public URL on a real device via BrowserStack, opening a live browser session on Android, iOS, or desktop browsers, or when the user mentions BrowserStack, real device testing, mobile testing, cross-browser testing, touch testing, or wants to verify behavior on a specific phone, tablet, or browser version. Also trigger when the user says "test this on Android/iPhone/Safari/Chrome mobile", asks to open a live session, or mentions demo-mobile.html, even if they don't mention BrowserStack by name.

日本語の概要は準備中です。原文の説明を表示しています。

handsontable/handsontable2.2万2026年10月12日 更新

Use when a source code change needs a changelog entry, or before committing and pushing any bug fix, feature, or behavior change to source code - detecting when entries are required, categorizing changes correctly (added/changed/fixed/deprecated/removed/security), writing user-facing titles, and creating the JSON entry in .changelogs/

日本語の概要は準備中です。原文の説明を表示しています。

handsontable/handsontable2.2万2026年10月12日 更新

Query the pre-built code-review-graph knowledge graph (Tree-sitter, whole monorepo) instead of walking call chains with Grep+Read – 2-6x cheaper, and it catches dynamic dispatch that grep misses. Use for ANY task that spans multiple files, even when the user never mentions a graph or asks for it - fixing or tracing a bug ("fix this bug", "why does X happen", "trace this"), exploring unfamiliar code ("how does X work", "who calls X", "what imports Y", "where is X used or handled"), planning or doing a refactor ("rename X", "is it safe to change or remove X", "what would break", "blast radius", "find dead code"), or reviewing changes ("review this PR", "review this branch or diff"). When you are about to Grep for a symbol's callers, callees, or importers, use this skill.

日本語の概要は準備中です。原文の説明を表示しています。

handsontable/handsontable2.2万2026年10月12日 更新

Use when working with row or column indexes in Handsontable - translating between physical, visual, and renderable coordinates, using IndexMapper, or debugging index-related bugs where rows or columns appear in wrong positions

日本語の概要は準備中です。原文の説明を表示しています。

handsontable/handsontable2.2万2026年10月12日 更新

Use when creating code examples for documentation pages - JavaScript, TypeScript, React, Angular, and Vue variants with proper imports, registration, and license key

日本語の概要は準備中です。原文の説明を表示しています。

handsontable/handsontable2.2万2026年10月12日 更新

handsontable のスキルをすべて見る

このスキルの問題を報告する