// Use when writing, reviewing, or refactoring frontend tests in Twake/Cozy React projects. Enforces @testing-library/react (never Enzyme or TestCafe), data-testid attributes, queryBy + toBeInDocument()/toBe(null) patterns, colocated *.spec files (no __tests__ folders), and bans snapshot tests.
Use when writing or reviewing JavaScript/TypeScript in Twake/Cozy projects. Enforces async/await over Promise chains, null over undefined, error handling contract (null / typed result / throw), function declaration style, strict equality, date handling via Intl/date-fns (never moment.js), AppLinker for redirections (never window.location), and business-logic-only comments.
Use when writing, reviewing, or scaffolding TypeScript in Twake/Cozy projects. Delta over twake-javascript-conventions — read that first. Enforces explicit types and exported types, type vs interface, unknown in catch, satisfies, strict mode, constrained generics, string unions over enums, TC39 decorators, and bans any / as unknown as T / @ts-ignore / unconstrained generics / void without justification.
Use when reading, writing, or designing data access against a Cozy stack from a Twake/Cozy React app — anything touching cozy-client, doctypes, Q(), client.query, useQuery, or client.collection. Forbids direct collection access that bypasses the redux store and offline cache, enforces Q() definitions through client.query/useQuery, mandates a centralized queries module, query alias naming per cozy-guidelines, an explicit fetchPolicy on every query, and the canonical where/partialIndex/indexFields/sortBy/limitBy pattern with the `{ $gt: null }` sentinel for sortBy fields.
Use when debugging, adding features to, or testing changes inside any cozy-* or twake-* library consumed by a Twake/Cozy React frontend app. Forbids hand-editing files under node_modules; directs to the linagora/cozy-libs monorepo and to yarn link or rlink for local testing.
Use when writing commit messages, creating branches, or opening pull requests on Linagora/Twake/Cozy projects. Enforces Conventional Commits, one subject per commit (atomic commits), a structured PR workflow (branch, commit, push, gh pr create), lowercase PR titles under 70 chars, and Summary-only PR bodies with no invented motivation and no em dashes.
Use when naming JavaScript/TypeScript functions, variables, cozy-client queries, or organizing imports in Twake/Cozy projects. Enforces function prefixes (fetch/get/find/has/is/compute/make/normalize/save/ensure/doSomethingAndForget), query `as` naming with doctype and params, and external→internal→local import order.
| name | twake-frontend-testing |
| description | Use when writing, reviewing, or refactoring frontend tests in Twake/Cozy React projects. Enforces @testing-library/react (never Enzyme or TestCafe), data-testid attributes, queryBy + toBeInDocument()/toBe(null) patterns, colocated *.spec files (no __tests__ folders), and bans snapshot tests. |
Apply these rules when writing or reviewing any frontend test in a Twake or Cozy React project.
@testing-library/react.If you find legacy Enzyme or TestCafe tests while editing nearby code, leave them alone unless migration is the task at hand — migration is its own ticket.
Do not write toMatchSnapshot() / toMatchInlineSnapshot() tests. They rot silently: reviewers rubber-stamp regenerated snapshots, which defeats the point of a test.
Assert on explicit, meaningful properties instead:
// ❌ Forbidden
expect(container).toMatchSnapshot()
// ✅ Good
expect(screen.getByRole('heading')).toHaveTextContent('Welcome, Alice')
expect(screen.queryByTestId('error-banner')).toBe(null)
data-testiddata-testid attribute on any element a test needs to target, if no accessible role / label already works.getByRole / getByLabelText first (better for accessibility). Fall back to data-testid only when the semantic query is ambiguous or fragile.submit-btn, error-banner.queryBy vs getBy in assertionsUse the right helper for the right assertion:
| Intent | Helper | Matcher |
|---|---|---|
| Element must be present | getByX | — (getByX throws if absent) |
| Assert presence explicitly | queryByX | .toBeInTheDocument() |
| Assert absence | queryByX | .toBe(null) |
// ✅ Good
expect(screen.queryByTestId('submit-btn')).toBeInTheDocument()
expect(screen.queryByTestId('error-banner')).toBe(null)
// ❌ Avoid — passes even when the element doesn't render
expect(screen.getByTestId('submit-btn')).toBeDefined()
The .toBeDefined() pattern is a false positive: getByX throws on absence, so the matcher never actually runs the absent-case assertion.
Test files live next to the source file, not in a separate __tests__ folder.
components/
UserCard.jsx
UserCard.spec.jsx ✅ colocated
UserCard.styl
__tests__/ ❌ do not create
UserCard.jsx
Naming: <SourceFile>.spec.<ext> (e.g. UserCard.spec.jsx, formatAmount.spec.js).
describe per component or module; one it per behavior. Keep test names human-readable (it('shows an error when the password is too short')).