Skip to content

Commit d64a346

Browse files
committed
docs: update CLAUDE.md for pnpm, vitest, and new features
Fix stale yarn references to pnpm, add vitest and cache entry points, document keyframe stabilization (k0/k1), namespace option, setStyleRuleOptions, and vitest test configuration.
1 parent 62dee7d commit d64a346

1 file changed

Lines changed: 23 additions & 14 deletions

File tree

β€ŽAGENTS.mdβ€Ž

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,32 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
55
## What This Is
66

77
jest-styled-components is a Jest testing utility library for styled-components (v5+). It provides two main features:
8-
1. A **snapshot serializer** that inlines CSS rules into snapshots and replaces hashed class names with deterministic placeholders (c0, c1, etc.)
8+
1. A **snapshot serializer** that inlines CSS rules into snapshots and replaces hashed class names with deterministic placeholders (`c0`, `c1` for classes; `k0`, `k1` for keyframes)
99
2. A **`toHaveStyleRule` matcher** for asserting specific CSS property values on rendered components
1010

1111
## Commands
1212

1313
```bash
14-
# Run all tests (web + native + preact)
15-
yarn test
14+
# Run all tests (web + native + preact + vitest + lint)
15+
pnpm test
1616

1717
# Run only web tests
18-
yarn test:web
18+
pnpm test:web
1919

2020
# Run web tests in watch mode
21-
yarn test:web:watch
21+
pnpm test:web:watch
2222

2323
# Run only React Native tests
24-
yarn test:native
24+
pnpm test:native
2525

2626
# Run only Preact tests
27-
yarn test:preact
27+
pnpm test:preact
28+
29+
# Run only Vitest integration tests
30+
pnpm test:vitest
31+
32+
# Run package linting (publint + attw)
33+
pnpm lint:pkg
2834

2935
# Run a single test file
3036
npx jest test/toHaveStyleRule.spec.js
@@ -37,23 +43,26 @@ npx jest --updateSnapshot
3743

3844
### Entry Points
3945

40-
- `src/index.js` β€” Main entry. Importing this registers the snapshot serializer and `toHaveStyleRule` matcher globally, and sets up `beforeEach` to reset the stylesheet between tests.
46+
- `src/index.js` β€” Main entry. Importing this registers the snapshot serializer and `toHaveStyleRule` matcher globally, and sets up `beforeEach` to reset the stylesheet between tests. Exports `setStyleRuleOptions` for global matcher configuration.
47+
- `vitest/index.js` β€” Vitest entry (ESM). Same registration as main entry but imports `beforeEach`/`expect` from vitest explicitly. Uses `createRequire` to load CJS source modules.
4148
- `native/index.js` β€” React Native entry. Only registers the native `toHaveStyleRule` matcher (no serializer needed).
4249
- `serializer/index.js` β€” Standalone serializer export for use with libraries like jest-specific-snapshot.
50+
- `cache/index.js` β€” Enables CSS parse caching for `toHaveStyleRule` performance.
4351

4452
### Core Modules
4553

46-
- **`src/utils.js`** β€” Shared utilities. Accesses styled-components internals via `__PRIVATE__` to read/reset the global stylesheet. Parses CSS with `@adobe/css-tools`. Key exports: `resetStyleSheet`, `getCSS`, `getHashes`, `matcherTest`, `buildReturnMessage`.
54+
- **`src/utils.js`** β€” Shared utilities. Accesses styled-components internals via `__PRIVATE__` to read/reset the global stylesheet. Parses CSS with `@adobe/css-tools`. Key exports: `resetStyleSheet`, `getCSS`, `collectHashes` (single-pass all+keyframe hash collection), `matcherTest`, `buildReturnMessage`.
4755
- **`src/styleSheetSerializer.js`** β€” Jest snapshot serializer. Walks the component tree to collect class names, extracts matching CSS rules from the stylesheet, replaces hashed class names with sequential placeholders, and prepends styles to the snapshot output. Uses a `WeakSet` cache to prevent re-processing nodes during recursive serialization.
48-
- **`src/toHaveStyleRule.js`** β€” Web matcher. Extracts class names from react-test-renderer JSON, Enzyme wrappers, or DOM elements, then queries parsed CSS for matching declarations. Supports `media`, `supports`, `container`, `layer`, and `modifier` options for targeting nested/at-rule styles.
56+
- **`src/toHaveStyleRule.js`** β€” Web matcher. Extracts class names from react-test-renderer JSON, Enzyme wrappers, or DOM elements, then queries parsed CSS for matching declarations. Supports `media`, `supports`, `container`, `layer`, `modifier`, and `namespace` options. Exposes `setStyleRuleOptions()` for global defaults (e.g. `StyleSheetManager` namespace).
4957
- **`src/native/toHaveStyleRule.js`** β€” React Native matcher. Works directly with the `style` prop (no CSS parsing needed), merging style arrays and converting kebab-case properties to camelCase.
5058

5159
### Test Configurations
5260

53-
Three separate Jest configs target different renderers:
54-
- Default (`package.json` "jest" field) β€” Web tests using jsdom, Enzyme, and react-test-renderer. Ignores `test/native/` and `test/preact/`.
61+
Four test configurations target different renderers:
62+
- Default (`package.json` "jest" field) β€” Web tests using jsdom, Enzyme, and react-test-renderer. Ignores `test/native/`, `test/preact/`, `test/vitest/`.
5563
- `.jest.native.json` β€” React Native tests using react-native preset, node environment.
5664
- `.jest.preact.json` β€” Preact tests with `moduleNameMapper` aliasing `react` β†’ `preact/compat`.
65+
- `test/vitest/` β€” Vitest workspace with its own `package.json` and `vitest.config.js`. Tests the ESM vitest entry point.
5766

5867
### Renderer Detection (Duck Typing)
5968

@@ -65,7 +74,7 @@ The matcher and serializer detect the rendering context without explicit imports
6574

6675
### No Build Step
6776

68-
Source JS is published directly β€” no transpilation, bundling, or minification. Babel is dev-only for tests. The `"files"` field limits what's published: `native/`, `serializer/`, `src/`, `typings/`.
77+
Source JS is published directly β€” no transpilation, bundling, or minification. Babel is dev-only for tests. The `"files"` field limits what's published: `cache/`, `native/`, `serializer/`, `src/`, `typings/`, `vitest/`.
6978

7079
## Key Implementation Details
7180

@@ -107,7 +116,7 @@ Uses `@adobe/css-tools` as the sole production dependency to parse stylesheet ou
107116
- **publint** validates package.json and published files (`--pack npm` due to yarn pack incompatibility).
108117
- **@arethetypeswrong/cli** (attw) validates TypeScript type resolution across node10/node16/bundler modes.
109118
- **knip** detects unused deps, exports, and dead files. Config in `knip.json`.
110-
- All quality checks run as part of `yarn test` via `lint:pkg` script.
119+
- All quality checks run as part of `pnpm test` via `lint:pkg` script.
111120
- **Changesets** for versioning with `@changesets/changelog-github` for PR-linked changelogs.
112121

113122
## CI

0 commit comments

Comments
Β (0)