kb-testing-nextjs

To fix Vitest hoisting ReferenceErrors in Next.js tests, declare mocks outside `vi.mock()` factories and bind them at call time using hoist-safe factory patterns. This prevents variable initialization errors caused by Vitest's hoisting behavior.

Mock Drizzle fluent query builders in Vitest by creating chainable thenable mocks that resolve when awaited. This allows the mock to handle sequential method calls and return asynchronous results accurately during unit tests.

The best query priority for React Testing Library in Next.js component tests is behavior-first, using accessible roles and labels. Reserve `getByTestId` as a last resort to ensure tests interact with the DOM as real users would.

Assert Next.js Server Action results by verifying the ActionResult shape, checking for discriminated `{ data } | { error }` return objects. This avoids expecting thrown exceptions and validates the actual output structure of the action.

Yes, you can use `userEvent.setup()` with React Testing Library in Vitest to drive clicks and form interactions. This approach matches real browser behavior more accurately than manual event firing, ensuring reliable component tests.

Next.js component tests flake with Vitest and React Testing Library due to improper mock hoisting, non-thenable query builder chains, or unrealistic event simulations. Standardizing on hoist-safe mocks and `userEvent.setup()` resolves these flaky outcomes.