vitest-component-testing-auto

Vitest Component Testing Best Practices

This rule enforces best practices for component tests written with Vitest (e.g., React Testing Library, Vue Test Utils, or other DOM-based libs). The goal is to ensure tests remain stable, user-focused, and easy to maintain.

Critical Rules

• Use a DOM-oriented library (e.g. @testing-library/react, @vue/test-utils) for rendering; avoid shallow rendering utilities that inspect implementation details.
• Prefer accessibility queries (getByRole, getByLabelText, etc.) over getByTestId or CSS selectors.
• Interact with the UI via userEvent (or framework-equivalent) instead of firing raw DOM events directly.
• Clean up side-effects by calling cleanup() (or rely on library auto-cleanup) after each test.
• Group related component behaviours in describe blocks with descriptive titles.
• Every test must contain at least one assertion via expect.
• Avoid querying private DOM nodes with container.querySelector; focus on visible user output.
• Do not snapshot the entire DOM tree for dynamic components; instead, assert specific, stable text/attributes.
• Use vi.mock() for module mocks and restore with vi.resetModules() or vi.clearAllMocks() in afterEach.

filters:

Match typical component test files

• type: file_extension pattern: "\.(component|ui|dom)?(test|spec)\.(js|ts|jsx|tsx)$"

Discourage non-descriptive test titles (≤10 chars)

• type: content pattern: "\b(?:it|test)\((?:'|")\s*[A-Za-z0-9]{1,10}\s*(?:'|")"

Detect use of container.querySelector

• type: content pattern: "container\.querySelector"

Detect direct event fire (e.g., fireEvent.click) instead of userEvent

• type: content pattern: "fireEvent\."

Ensure at least one expect per test block (heuristic)

• type: content pattern: "\b(?:it|test)\([^)]{(?:(?!expect).)}$"

actions:

Suggest more descriptive titles

• type: suggest message: | Test titles should clearly describe user behaviour, e.g. it('shows error message when API call fails', ...).