skilld
All skills
langgenius avatar

/frontend-testing

@dde1d50
by langgeniuslanggenius/dify158k stars
24,861

Use when writing or changing Vitest or React Testing Library tests under `web/` or `packages/dify-ui/`, or when the user explicitly requests frontend test strategy, including evaluation of an existing strategy. Do not use for frontend code-review-only requests, general testability discussion, Python tests, or Cucumber/Playwright E2E.

Ask your Agent

Use this Skill: https://skilld.dev/gh/langgenius/dify/frontend-testing

This session only. Nothing lands on disk.

SKILL.md

≈88 tokens always: the name and description. ≈146 when used: this file.

Frontend Testing

Read the testing policy for the package that owns the changed tests:

  • web/: web/docs/test.md owns Web test boundaries, environments, and commands.
  • packages/dify-ui/: packages/dify-ui/docs/testing.md owns primitive test boundaries, environments, Storybook, and commands.

This skill adds no parallel policy or check sequence. Follow the selected owner's requirements, including its validation commands. Recommend deleting low-value tests as readily as adding missing behavior coverage, and report the contract verified and any material verification gap.

Source: SKILL.md on GitHub

Third-party checks

No alerts16d5 checks · Risk SAFE
  • Gen Agent Trust Hub16d

    The skill is safe. It provides non-executable guidelines and policy directions for frontend testing within a repository.

  • Socket16d

    No alerts

  • Snyk16d

    Risk: LOW · No issues

  • Runlayer7mo

    1/10 files flagged

  • ZeroLeaks5mo

    Score: 93/100 · 2 sections analyzed

Provenance

Signed by skilld at dde1d50. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 18 hours ago.

Activeupdated 4 weeks ago

Topics

  • Frontend
  • Testing
  • vitest
  • react-testing-library
  • rtl
  • dify
  • components
  • hooks
  • unit-tests
  • integration-tests

README badge

README badge for langgenius/dify/frontend-testing

What it does

Generates Vitest and React Testing Library tests for Dify frontend components, hooks, and utilities following the project's conventions. Tests use the AAA pattern, semantic queries, and an incremental one-file-at-a-time workflow; mocks external dependencies like API services and next/navigation while importing real project components.

Generated from the current SKILL.md.

Frequently asked

Does this skill cover E2E testing or only unit/integration tests?
This skill covers unit and integration tests for frontend components, hooks, and utilities using Vitest and React Testing Library. E2E tests (Cucumber + Playwright) are out of scope; use the E2E testing skill for those.
What should I mock and what should I import as real?
Mock only external dependencies like API services (`@/service/*`), `next/navigation`, and complex context providers. Import and use real project components, base components from `@/app/components/base/*`, and dify-ui primitives directly in tests.
How should I organize test files in the Dify project?
Test files must live in a sibling `__tests__/` directory at the same level as the source. For example, `foo/index.tsx` maps to `foo/__tests__/index.spec.tsx`, and `foo/bar.ts` maps to `foo/__tests__/bar.spec.ts`.
Should I write all tests at once or incrementally?
Always use an incremental approach. Analyze and list files, order by complexity (simple to complex), then write and run tests one file at a time, verifying each passes before proceeding to the next.
How do I test components that use `useQueryState` from nuqs?
Use `NuqsTestingAdapter` from the shared helpers in `web/test/nuqs-testing.tsx` and assert URL synchronization via `onUrlUpdate`. Ensure custom parsers maintain bijective `parse` and `serialize` functions.

Generated from the current SKILL.md. These answers refresh after source changes.