Skip to content

fix: vitest compatibility — ESM entrypoint and framework-agnostic matcher#460

Merged
quantizor merged 5 commits into
mainfrom
fix/vitest-compat
Mar 27, 2026
Merged

fix: vitest compatibility — ESM entrypoint and framework-agnostic matcher#460
quantizor merged 5 commits into
mainfrom
fix/vitest-compat

Conversation

@quantizor
Copy link
Copy Markdown
Contributor

Summary

  • Fixes vitest entrypoint fails: jest-styled-components/vitest uses require('vitest') which is ESM-only #458: Convert vitest/index.js to ESM via scoped vitest/package.json with "type": "module", using createRequire to bridge to CJS source modules. The previous CJS require('vitest') threw because Vitest v4 is ESM-only.
  • Fixes Usage of expect in matcherTest breaks under Vitest without injected globals #459: Replace expect.stringMatching() / expect().toEqual() in matcherTest with plain JS — RegExp.test(), asymmetricMatch() protocol, and strict equality. This removes the dependency on any test framework's global expect, so toHaveStyleRule works in Vitest without globals: true.
  • Add jest-environment-jsdom@27 as explicit dev dep for Node 24 compatibility
  • Pin http-proxy-agent override to ^7.0.0 (v8 is ESM-only, breaks Jest 27's CJS require)
  • Add pnpm workspace with Vitest test suite (globals: false) covering matcher and serializer

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Mar 23, 2026

🦋 Changeset detected

Latest commit: 92a015e

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Convert vitest/index.js to ESM via scoped package.json with
"type": "module" and createRequire bridge for CJS source modules.
Replace Jest expect() calls in matcherTest with plain JS comparison
(RegExp.test, asymmetricMatch protocol, strict equality).

Fixes #458, fixes #459
Add pnpm workspace at test/vitest with Vitest 4 running globals:false
to verify the /vitest entrypoint works end-to-end. Covers matcher
(basic, regex, asymmetric matchers, negation, media, modifiers,
theming) and snapshot serializer.

Suppress expected React dev warnings and jsdom CSS parse noise
in test setup.
- Update .nvmrc from v20 to v24 (current LTS)
- Add jest-environment-jsdom@27 for explicit jsdom version control
- Pin http-proxy-agent override to ^7.0.0 (v8 is ESM-only, breaks CJS)
- Add test:vitest script and exclude vitest tests from Jest config
- Add vitest workspace to pnpm lockfile
pull_request_target checks out the base branch by default, so CI
was never actually testing PR changes.
@quantizor
Copy link
Copy Markdown
Contributor Author

Testable via npm i jest-styled-components@test

Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Fixes Vitest v4 integration by making the /vitest entrypoint ESM-compatible and removing hard dependency on a global expect inside matcher logic, plus adds a pnpm workspace-based Vitest test suite to validate behavior with globals: false.

Changes:

  • Convert vitest/index.js to ESM (scoped "type": "module") while bridging to existing CJS source via createRequire.
  • Refactor matcherTest to use framework-agnostic matching (RegExp/asymmetricMatch/strict equality) instead of expect.*.
  • Add a pnpm workspace + Vitest tests (and snapshots) to exercise matcher/serializer under Vitest without globals; adjust tooling deps/overrides for Node 24 + Jest 27.

Reviewed changes

Copilot reviewed 14 out of 15 changed files in this pull request and generated 4 comments.

Show a summary per file
File Description
vitest/package.json Marks the /vitest entrypoint directory as ESM via "type": "module".
vitest/index.js Switches Vitest entrypoint to ESM imports and re-exports utilities for Vitest setup.
src/utils.js Makes matcherTest independent of framework expect, enabling Vitest without globals.
test/vitest/vitest.config.js Adds Vitest config (jsdom, globals: false) for the new test workspace.
test/vitest/toHaveStyleRule.test.jsx Adds Vitest coverage for toHaveStyleRule across common cases (regex/asymmetric/etc.).
test/vitest/styleSheetSerializer.test.jsx Adds Vitest coverage for serializer snapshot output.
test/vitest/__snapshots__/styleSheetSerializer.test.jsx.snap Commits Vitest snapshot outputs for serializer tests.
test/vitest/package.json Defines a workspace package to run Vitest tests against the local workspace build.
pnpm-workspace.yaml Declares the test/vitest workspace package for pnpm.
package.json Adds test:vitest, ignores Vitest tests in Jest, adds jest-environment-jsdom, updates override, bumps version.
pnpm-lock.yaml Locks new workspace deps and adjusts http-proxy-agent override + jest-environment-jsdom.
test/setup.js Suppresses some console.error noise during Jest tests.
.nvmrc Bumps CI/local Node version target to v24.
.changeset/vitest-compat.md Adds changeset describing Vitest compatibility fix.
Files not reviewed (1)
  • pnpm-lock.yaml: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/utils.js Outdated
Comment thread vitest/index.js
Comment thread package.json Outdated
Comment thread test/setup.js
- Clone RegExp in matcherTest to prevent lastIndex mutation with g/y flags
- Add missing enableCSSCache/disableCSSCache types to vitest/index.d.ts
- Revert prerelease version bump
@quantizor quantizor merged commit 983abd0 into main Mar 27, 2026
3 of 4 checks passed
@quantizor quantizor deleted the fix/vitest-compat branch March 27, 2026 02:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

2 participants