repo-source-code-test-frameworks

Writes unit and type tests for Formisch framework wrapper packages across seven JS frameworks.

1.2k|33|Updated Apr 5, 2025
One-click install
npx skills add https://github.com/open-circle/formisch --skill repo-source-code-test-frameworks
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: repo-source-code-test-frameworks
Source: https://github.com/open-circle/formisch/tree/main/.agents/skills/repo-source-code-test-frameworks
Command: npx skills add https://github.com/open-circle/formisch --skill repo-source-code-test-frameworks

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Maintaining consistent unit and type tests across seven framework wrappers (Angular, Preact, React, React Native, Solid, Svelte, Vue) of the Formisch form library is error-prone, since each framework has different reactivity models, testing libraries, and adapter APIs.

Core Features & Use Cases

  • Canonical test conventions: Enforces React as the reference implementation with identical describe/test names, schemas, and expected outputs ported to every other framework.
  • Per-framework adapter guidance: Provides concrete rules for hooks (useForm/createForm/injectForm), field APIs, DOM event firing, renderHook helpers, and async handling with vi.waitFor for each framework.
  • Type test patterns: Standardizes *.test-d.ts files using expectTypeOf, with framework-specific wrappers like ReadonlySignal for Preact and Signal for Angular.
  • Use Case: When adding tests for a new useField feature, apply the React test names exactly, then port to Solid, Vue, Svelte, Preact, Angular, and React Native using the adapter tables and gotcha notes.

Quick Start

Write unit and type tests for the useField hook in frameworks/svelte following the repo's cross-framework testing conventions.

Frequently Asked Questions about repo-source-code-test-frameworks

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I write tests for Formisch framework packages?

Start with the React implementation as the canonical reference, then port identical describe/test names, schemas, and expected outputs to other frameworks. Only mechanical adapters differ, such as createForm in Solid or injectForm in Angular.

How to test hooks in Vue and Svelte without a component?

Use the custom renderHook helper at src/vitest/renderHook.ts, which mounts a wrapper component so lifecycle hooks like onBeforeMount or onMount have context. For pure Svelte rune logic without lifecycle, $effect.root in a .test.svelte.ts file is a lighter option.

Does React Native testing support the Form component?

No, React Native has no Form component and no submit method, so submission tests call handleSubmit directly. Tests render through react-native-web with @testing-library/react and jsdom, using fireEvent.change on rendered TextInput elements.

Why should async tests avoid setTimeout in vitest?

setTimeout(0) makes tests flaky because it does not wait for actual reactive updates. Use vi.waitFor to poll assertions until reactive state settles, flushSync for Svelte rune updates, or flushPromises for one-shot Vue microtask drains.

What coverage is required for Formisch framework tests?

Tests must reach 100% coverage on every non-excluded file, matching React's vitest.config.ts exclusions for src/types, src/vitest, index files, and test files. Framework-specific branches like Solid's unwrap need dedicated tests with explanatory comments.