@krapwoo/ds-viewer 0.13.0 → 0.13.1

package/README.md

@@ -167,6 +167,13 @@ npm run viewer:dev       # opens viewer-host/, the DS Viewer internals catalog (
 
 `check:catalog`, `check:doctor` and `check:types` cover both catalogs.
 
+Three checks cover three different things, and none substitutes for another: `npm test` covers
+pure logic and source assertions; `npm run test:render` renders catalog components into jsdom
+through react-native-web and covers component structure (which element wraps what); `npm run
+check:catalog` is the only one that sees geometry, because jsdom has no layout engine —
+`getBoundingClientRect()` returns zeros there. A layout or alignment claim must be verified in a
+browser, with `check:catalog`, never in a renderer test.
+
 ## Contributing
 
 Found a bug or an improvement while using ds-viewer in your app? Open an issue or a pull request:

package/native/catalog/FamilyPage.tsx

@@ -793,7 +793,10 @@ function AnatomyMemberRow({ memberId, description, byId, outline }: { memberId:
   return (
     <View style={styles.legendRow}>
       {pin && (
-        <View style={styles.legendPinSlot}>
+        // `testID` exists only so a renderer test can assert the slot's presence without
+        // depending on class names — react-native-web renders it to the DOM as `data-testid`;
+        // native ignores it.
+        <View style={styles.legendPinSlot} testID="legend-pin-slot">
           <Pin number={pin.number} dashed={pin.dashed} />
         </View>
       )}
@@ -817,7 +820,7 @@ function AnatomyOtherRow({ name, description, resolvesAddress }: { name: string;
   const resolved = resolvesAddress(name);
   return (
     <View style={styles.legendRow}>
-      <View style={styles.legendPinSlot} {...ARIA_HIDDEN}>
+      <View style={styles.legendPinSlot} {...ARIA_HIDDEN} testID="legend-pin-slot">
         <View style={styles.extPin}>
           <Text style={styles.extPinText}>↗</Text>
         </View>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krapwoo/ds-viewer",
-  "version": "0.13.0",
+  "version": "0.13.1",
   "license": "MIT",
   "type": "module",
   "description": "A browsable, always-current catalog for an Expo / React Native design system.",
@@ -55,14 +55,18 @@
     "typescript": "^6.0.0"
   },
   "devDependencies": {
+    "@types/jsdom": "^21.1.7",
     "@types/node": "^22.0.0",
     "@types/react": "^19.0.0",
+    "esbuild": "^0.25.12",
+    "jsdom": "^26.1.0",
     "puppeteer": "^25.12.0"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",
     "prepack": "npm run build",
     "test": "node --experimental-strip-types --test 'cli/**/*.test.ts' 'config/**/*.test.ts' 'native/catalog/__tests__/*.test.ts'",
+    "test:render": "node --import ./test/register.mjs --test 'test/__tests__/*.test.ts' 'native/catalog/__tests__/*.test.tsx'",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "kit:dev": "npm run build && cd kit-host && node node_modules/@krapwoo/ds-viewer/dist/cli/main.js dev",
     "viewer:dev": "npm run build && cd viewer-host && node node_modules/@krapwoo/ds-viewer/dist/cli/main.js dev",