Files
chat/client/test/react-native-svg.stub.js
zeekayandHanzo Dev 60319308d0 test(client): let jest render @hanzo/ui 8.x primitives
The rest of the Radix migration is gated on this. Before this commit, ANY test
that rendered an 8.x primitive died before running a single assertion — so
"swap the import, the build is green" would have been shipping blind on 56
Checkbox/Switch call sites. Four separate things were broken; each was found by
running it, not by reading docs.

1. jest.config `transform` only claimed `.js/.jsx/.ts/.tsx`. @hanzo/gui's ESM
   entry is `dist/esm/index.mjs`, so NO transformer claimed it and the failure
   was `Cannot use import statement outside a module` — reported against the
   test's own import line, pointing nowhere near the cause. Now `\.[mc]?[jt]sx?$`.

2. `transformIgnorePatterns` was `['node_modules/?!@zattoo/use-double-click']`
   — a negative lookahead with the parentheses missing, so it read as the
   LITERAL text "!@zattoo/use-double-click" after an optional slash. Nothing
   matches that, so the list ignored nothing and everything in node_modules was
   already being transformed. That accident is load-bearing (the ESM-only Hanzo
   packages need transforming), so this keeps the behaviour and says so, rather
   than leaving a broken regex that looks deliberate.

3. `react-native-svg` resolved to `src/index.ts` via its `react-native` field —
   raw TypeScript in node_modules, then Flow-typed react-native source babel
   cannot parse. It is only in the graph because `@hanzogui/[email protected]`
   imports it from the file its own `browser` condition points at while
   declaring it in neither dependencies nor peerDependencies. test/
   react-native-svg.stub.js renders plain SVG DOM instead; jsdom does SVG and no
   test here asserts on SVG internals. Delete it when that package is fixed.

4. @hanzo/gui refuses to render without `createGui`. setupTests.js now requires
   the SAME config App.jsx uses, so tests and production share one scale.

A global GuiProvider wrapper on RTL's `render` was implemented, measured, and
REJECTED: it regressed 8 previously-passing suites (SmartLoader, MemoryInfo,
UIResourceCarousel, FileRow, SkillsCommand, FavoritesList, MCPUIResourceCarousel,
SkillPills). Tempting, defensible in principle — production really does wrap
everything — and wrong on the evidence. Tests wrap per file until those 8 are
understood; the reason is written where someone would otherwise re-add it.

src/__tests__/guiPrimitives.spec.tsx proves the harness works AND that the
primitives behave: Checkbox and Switch both fire onCheckedChange on a real
click. That is the first actual behavioural evidence on this branch that gui
primitives work, not just compile.

Verified per suite by name against main, same session: 0 passed->failed,
0 failed->passed, one net new passing suite. 117p/78f vs main's 116p/78f,
1766 vs 1764 passing tests — the delta is exactly the two new tests. Build
green: 3m 22s.

Co-authored-by: Hanzo Dev <[email protected]>
2026-08-03 19:47:46 -07:00

62 lines
2.2 KiB
JavaScript

/**
* jsdom stand-in for `react-native-svg`.
*
* WHY THIS EXISTS — it is not a convenience, it routes around a packaging bug.
* `@hanzogui/[email protected]` imports `react-native-svg` from the very file
* its own `browser` export condition points at, while declaring it in neither
* `dependencies` nor `peerDependencies`. Every `@hanzo/ui` 8.x primitive that
* shows an icon (Checkbox's tick, Select's chevron, …) drags it in.
*
* In a browser bundle vite resolves that to the package's `.web.js` siblings and
* it works. Under jest it does not: `react-native-svg`'s `react-native` field
* points at `src/index.ts`, so jest walks into raw TypeScript inside
* node_modules and then into `react-native/Libraries/Utilities/
* codegenNativeComponent.js` — Flow-typed source babel-jest cannot parse. The
* failure surfaces as a SyntaxError blamed on the test's own import line.
*
* jsdom renders real SVG elements, and no unit test here asserts on SVG
* internals — they assert on labels, roles and handlers. So the honest fix for
* the TEST environment is to render plain SVG DOM and let the component under
* test be what is exercised. Delete this the day lucide-icons-2 stops importing
* a native-only module from its browser build.
*/
const React = require('react');
/** react-native-svg passes RN-flavoured props; SVG DOM wants the dashed names. */
const el =
(tag) =>
({ children, ...props }) =>
React.createElement(tag, props, children);
const Svg = ({ children, width, height, ...props }) =>
React.createElement('svg', { width, height, ...props }, children);
module.exports = {
__esModule: true,
default: Svg,
Svg,
Circle: el('circle'),
Ellipse: el('ellipse'),
G: el('g'),
Text: el('text'),
TSpan: el('tspan'),
TextPath: el('textPath'),
Path: el('path'),
Polygon: el('polygon'),
Polyline: el('polyline'),
Line: el('line'),
Rect: el('rect'),
Use: el('use'),
Image: el('image'),
Symbol: el('symbol'),
Defs: el('defs'),
LinearGradient: el('linearGradient'),
RadialGradient: el('radialGradient'),
Stop: el('stop'),
ClipPath: el('clipPath'),
Pattern: el('pattern'),
Mask: el('mask'),
Marker: el('marker'),
ForeignObject: el('foreignObject'),
};