fix(tests): unzero the component tier — one mock factory was aborting the whole run

`preview / component-tests` was reporting `failure` on `main` while executing ZERO
tests. Reproduced deterministically (3/3 at d353f785c3, and in isolation): the whole
`component` project aborts before any reporter prints, with no `Test Files` line, no
per-file results, and exit 1.

Root cause, one file:
`src/tests/pages/apps/review/review-queue-nav.browser.test.tsx:30` mocks
`~/providers/FeatureFlagsProvider` with a WHOLESALE factory naming only
`useFeatureFlags`. The review queue page's row now renders the review entry point,
which reads flags through `useOptionalFeatureFlags`, so the named import has nothing
to bind to:

  SyntaxError: The requested module '/src/providers/FeatureFlagsProvider.tsx'
  does not provide an export named 'useOptionalFeatureFlags'

In the node `unit` project that would fail ONE file. In BROWSER mode it kills the run:
vitest resolves a manual mock over the browser-to-node channel inside a Playwright
route handler that does not catch (`@vitest/browser-playwright/dist/index.js`,
`await module.resolve()` inside `page.route`), so the rejection escapes as an
Unhandled Rejection in the orchestrator.

The printed error names neither the file nor the real cause. It is wrapped twice --
once by the browser mocker, once again on the node side -- and the innermost `cause`
is dropped in transit, so all you see is the generic "[vitest] There was an error when
mocking a module ... make sure there are no top level variables inside", which points
at hoisting and is wrong. The root cause above was recovered by temporarily patching
`createHelpfulError` in the browser tester bundle to inline `cause.stack`; the file was
then confirmed by bisecting the 50 candidate files down to one.

This is the SECOND time this class has bitten (see the header of
`src/components/AppBlocks/__tests__/featureFlagsMockCompleteness.test.ts`, which fixed
six sibling suites in the AppBlocks directory and deliberately scoped its guard there).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
ZacxDev
2026-08-31 16:22:21 -05:00
parent d353f785c3
commit c32aa06e8d
@@ -27,8 +27,22 @@ vi.mock('~/server/utils/server-side-helpers', () => ({
createServerSideProps: () => async () => ({ props: {} }),
}));
// 🔴 BOTH hooks, because this factory REPLACES the module. The queue page's row now
// renders the review entry point, which reads flags through `useOptionalFeatureFlags`
// (the non-throwing variant, correct outside a provider). A factory naming only
// `useFeatureFlags` leaves that named import nothing to bind to:
// SyntaxError: The requested module '/src/providers/FeatureFlagsProvider.tsx'
// does not provide an export named 'useOptionalFeatureFlags'
// and in BROWSER mode that does not fail this file — it takes down the whole run. The
// factory is resolved over the browser<->node channel inside a Playwright route handler
// that does not catch, so the rejection escapes as an Unhandled Rejection in the
// orchestrator: no summary, no per-file results, zero tests collected, exit 1. This one
// file zeroed the entire `preview / component-tests` tier.
// Both hooks return the SAME flags: the gate must be decided by this fixture, not by
// which of the two a component happens to call.
vi.mock('~/providers/FeatureFlagsProvider', () => ({
useFeatureFlags: () => state.flags,
useOptionalFeatureFlags: () => state.flags,
}));
// Stub the modal component (assert whether a selection opened it) but keep the