You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
Copy file name to clipboardExpand all lines: AGENTS.md
+23-14Lines changed: 23 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,26 +5,32 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
5
5
## What This Is
6
6
7
7
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)
9
9
2. A **`toHaveStyleRule` matcher** for asserting specific CSS property values on rendered components
10
10
11
11
## Commands
12
12
13
13
```bash
14
-
# Run all tests (web + native + preact)
15
-
yarntest
14
+
# Run all tests (web + native + preact + vitest + lint)
15
+
pnpmtest
16
16
17
17
# Run only web tests
18
-
yarn test:web
18
+
pnpm test:web
19
19
20
20
# Run web tests in watch mode
21
-
yarn test:web:watch
21
+
pnpm test:web:watch
22
22
23
23
# Run only React Native tests
24
-
yarn test:native
24
+
pnpm test:native
25
25
26
26
# 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
28
34
29
35
# Run a single test file
30
36
npx jest test/toHaveStyleRule.spec.js
@@ -37,23 +43,26 @@ npx jest --updateSnapshot
37
43
38
44
### Entry Points
39
45
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.
41
48
-`native/index.js` β React Native entry. Only registers the native `toHaveStyleRule` matcher (no serializer needed).
42
49
-`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.
43
51
44
52
### Core Modules
45
53
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`.
47
55
-**`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` optionsfor 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).
49
57
-**`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.
50
58
51
59
### Test Configurations
52
60
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/`.
55
63
-`.jest.native.json` β React Native tests using react-native preset, node environment.
56
64
-`.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.
57
66
58
67
### Renderer Detection (Duck Typing)
59
68
@@ -65,7 +74,7 @@ The matcher and serializer detect the rendering context without explicit imports
65
74
66
75
### No Build Step
67
76
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/`.
69
78
70
79
## Key Implementation Details
71
80
@@ -107,7 +116,7 @@ Uses `@adobe/css-tools` as the sole production dependency to parse stylesheet ou
107
116
-**publint** validates package.json and published files (`--pack npm` due to yarn pack incompatibility).
108
117
-**@arethetypeswrong/cli** (attw) validates TypeScript type resolution across node10/node16/bundler modes.
109
118
-**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.
111
120
-**Changesets** for versioning with `@changesets/changelog-github` for PR-linked changelogs.
0 commit comments