@testing-library/jest-dom/vitest setup fails with "Invalid Chai property: toBeInTheDocument"

[koizuka]

Describe the bug

After migrating a React project to Vite+ using vp migrate, tests that use @testing-library/jest-dom/vitest fail with:

Error: Invalid Chai property: toBeInTheDocument

Root cause

@testing-library/jest-dom/vitest internally calls require('vitest').expect.extend(matchers) to register custom matchers. However, in Vite+, vitest is aliased to @voidzero-dev/vite-plus-test via npm overrides. The expect instance obtained by jest-dom through require('vitest') appears to be a different instance from the one actually used during test execution, so the matchers are never registered on the real expect.

Workaround

Manually importing matchers and extending expect from vite-plus/test works:

// setupTests.ts
// import '@testing-library/jest-dom/vitest';  // ← does NOT work
import * as matchers from '@testing-library/jest-dom/matchers';
import { expect } from 'vite-plus/test';
expect.extend(matchers);

Reproduction

1. Create a React project that uses @testing-library/jest-dom with import '@testing-library/jest-dom/vitest' in setupTests.ts
2. Run vp migrate
3. Run vp test run
4. All tests using jest-dom matchers (toBeInTheDocument, toHaveTextContent, etc.) fail with "Invalid Chai property"

Steps to reproduce

1. vp migrate on an existing Vite + Vitest + React project
2. vp test run

System Info

vp v0.1.11

Local vite-plus:
  vite-plus  v0.1.11

Tools:
  vite             v8.0.0
  rolldown         v1.0.0-rc.9
  vitest           v4.1.0
  oxfmt            v0.40.0
  oxlint           v1.55.0
  oxlint-tsgolint  v0.16.0
  tsdown           v0.21.2

Environment:
  Version  24.14.0
  Source   lts

Logs

Error: Invalid Chai property: toBeInTheDocument
 ❯ Object.proxyGetter [as get] node_modules/@voidzero-dev/vite-plus-test/dist/vendor/chai.mjs:1203:15

[koizuka]

Update: refined workaround

After further investigation, the workaround in the original report can be simplified. Instead of importing expect from vite-plus/test, importing from vitest works because of the npm override alias:

// setupTests.ts
import * as matchers from '@testing-library/jest-dom/matchers';
import { expect } from 'vitest';  // works via npm override alias
expect.extend(matchers);

This is important because importing from vitest (rather than vite-plus/test) preserves TypeScript type augmentation compatibility. @testing-library/jest-dom ships a types/vitest.d.ts that does declare module 'vitest' { interface Assertion<T> extends ... }, which correctly augments the Assertion type when test files import from vitest. If test files import from vite-plus/test instead, this type augmentation doesn't apply because the module name doesn't match, and a separate custom .d.ts file is needed.

Additional issue: vp migrate import rewriting

vp migrate rewrites all from 'vitest' imports to from 'vite-plus/test' across test files. This rewriting is unnecessary (the npm override already aliases vitest → @voidzero-dev/vite-plus-test) and actively harmful because it breaks declare module 'vitest' type augmentations used by @testing-library/jest-dom and potentially other libraries.

Suggestion: vp migrate should not rewrite vitest imports in test files when npm overrides are already configured.

[fengmk2]

Could you provide a code repository that can reproduce the issue? I'd like to use it as a fixed test case for future improvements.

[koizuka]

Here's a minimal reproduction repository: https://github.com/koizuka/vite-plus-jest-dom-repro

Steps to reproduce

git clone https://github.com/koizuka/vite-plus-jest-dom-repro
cd vite-plus-jest-dom-repro

# Verify pre-migration tests pass
git checkout pre-migration
npm install
npx vitest run  # ✅ 1 test passed

# Switch to post-migration state (after vp migrate)
git checkout master
npm install
vp test run     # ❌ Error: Invalid Chai property: toBeInTheDocument

The master branch contains the state after vp migrate. The pre-migration branch contains the original Vite + Vitest setup where tests pass.

The test is a single file (src/App.test.jsx) that renders a React component and asserts toBeInTheDocument(), with src/setupTests.js importing @testing-library/jest-dom/vitest.