[No QA] Fix failing victory-chart-renderer builds

.github/workflows/bunTests.yml

@@ -0,0 +1,44 @@
+name: Bun tests
+
+on:
+  pull_request:
+    types: [opened, synchronize]
+    branches-ignore: [staging, production]
+    paths:
+      - 'server/**'
+      - 'src/**'
+      - 'bunfig.toml'
+      - '.bun-version'
+      - 'package.json'
+      - 'package-lock.json'
+      - '.github/workflows/bunTests.yml'
+
+concurrency:
+  group: ${{ github.ref }}-bun-tests
+  cancel-in-progress: true
+
+jobs:
+  test:
+    name: Bun tests
+    runs-on: blacksmith-8vcpu-ubuntu-2404
+    steps:
+      - name: Checkout
+        uses: useblacksmith/checkout@c9796daa2a4bdebdab5bd16be2c09a70cd4e1121 # v1
+
+      - name: Setup Node
+        uses: ./.github/actions/composite/setupNode
+
+      - name: Setup Bun
+        # v2.2.0
+        uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6
+        with:
+          bun-version-file: .bun-version
+
+      - name: Run Bun tests
+        run: npm run test:bun
+
+      - name: Build victory-chart-renderer Linux x64 binary
+        run: npm run server:vcr:build:linux
+
+      - name: Smoke-test compiled victory-chart-renderer binary
+        run: ./server/victory-chart-renderer/dist/victory-chart-renderer-linux-x64 --chart-xml "$(cat server/victory-chart-renderer/tests/fixtures/top-categories-6.xml)" --out /tmp/vcr-smoke.png && test -s /tmp/vcr-smoke.png

bunfig.toml

@@ -0,0 +1,10 @@
+# Bun test discovery for server-side tooling (Jest owns src/ and tests/).
+[test]
+root = "server"
+pathIgnorePatterns = [
+  "**/fixtures/**",
+  "**/dist/**",
+  "**/.dev/**",
+  "**/__output__/**",
+  "**/__golden__/**",
+]

package.json

@@ -81,6 +81,7 @@
     "compress-svg": "npx ts-node scripts/compressSvg.ts --dir assets/images && npx ts-node scripts/compressSvg.ts --dir docs/assets/images",
     "server:vcr:dev": "npm run dev -w @expensify/victory-chart-renderer --",
     "server:vcr:test": "npm run test -w @expensify/victory-chart-renderer --",
+    "test:bun": "bun test --concurrent --max-concurrency 7",
     "server:vcr:build:linux": "npm run build:linux -w @expensify/victory-chart-renderer --",
     "server:vcr:build:linux-arm": "npm run build:linux-arm -w @expensify/victory-chart-renderer --",
     "server:vcr:build:macos": "npm run build:macos -w @expensify/victory-chart-renderer --"

server/libs/getCjsDefaultExport.ts

@@ -0,0 +1,9 @@
+/** Unwrap Bun's __toESM(require(), 1) double-default when importing CJS modules. */
+function getCjsDefaultExport(namespace: Record<string, unknown>): unknown {
+    const first = namespace.default ?? namespace;
+    const second = typeof first === 'object' && first !== null && 'default' in first ? ((first as Record<string, unknown>).default ?? first) : first;
+
+    return second;
+}
+
+export default getCjsDefaultExport;

server/plugins/rnStubPlugin.ts

@@ -35,7 +35,7 @@ export default function createRnStubPlugin(stubRoot: string): BunPlugin {
             }));
 
             build.onResolve({filter: /^@react-native-community\/netinfo$/}, () => ({
-                path: resolve(stubRoot, 'react-native/subpath.ts'),
+                path: resolve(stubRoot, 'react-native-community-netinfo.ts'),
             }));
 
             build.onResolve({filter: /^react-native$/}, () => ({
@@ -57,6 +57,22 @@ export default function createRnStubPlugin(stubRoot: string): BunPlugin {
             build.onResolve({filter: /^react-native-nitro-fetch$/}, () => ({
                 path: resolve(stubRoot, 'react-native-nitro-fetch.ts'),
             }));
+
+            build.onResolve({filter: /^react-native-onyx$/}, () => ({
+                path: resolve(stubRoot, 'react-native-onyx.ts'),
+            }));
+
+            build.onResolve({filter: /^\.\/platforms$/}, (args) => {
+                if (!args.importer.includes('react-native-onyx/dist/storage')) {
+                    return;
+                }
+
+                return {path: resolve(stubRoot, 'onyx-storage-platform.ts')};
+            });
+
+            build.onResolve({filter: /^react-native-localize$/}, () => ({
+                path: resolve(stubRoot, 'react-native-localize.ts'),
+            }));
         },
     };
 }

server/stubs/onyx-storage-platform.ts

@@ -0,0 +1,4 @@
+import getCjsDefaultExport from '@server/libs/getCjsDefaultExport';
+import * as MemoryOnlyProviderNamespace from 'react-native-onyx/dist/storage/providers/MemoryOnlyProvider';
+
+export default getCjsDefaultExport(MemoryOnlyProviderNamespace);

server/stubs/react-native-community-netinfo.ts

@@ -0,0 +1,22 @@
+const NetInfo = {
+    configure: () => {},
+    addEventListener: (callback: (state: {isConnected: boolean; isInternetReachable: boolean; type: string}) => void) => {
+        queueMicrotask(() => {
+            callback({
+                isConnected: true,
+                isInternetReachable: true,
+                type: 'wifi',
+            });
+        });
+        return () => {};
+    },
+    refresh: () => Promise.resolve(),
+    fetch: () =>
+        Promise.resolve({
+            isConnected: true,
+            isInternetReachable: true,
+            type: 'wifi',
+        }),
+};
+
+export default NetInfo;

server/stubs/react-native-localize.ts

@@ -0,0 +1,22 @@
+function findBestLanguageTag() {
+    return {languageTag: 'en-US', isRTL: false};
+}
+
+const RNLocalize = {
+    getLocales: () => [{languageCode: 'en', countryCode: 'US', languageTag: 'en-US', isRTL: false}],
+    getNumberFormatSettings: () => ({
+        decimalSeparator: '.',
+        groupingSeparator: ',',
+    }),
+    getCalendar: () => 'gregorian',
+    getCountry: () => 'US',
+    getCurrencies: () => ['USD'],
+    getTemperatureUnit: () => 'celsius',
+    getTimeZone: () => 'America/Los_Angeles',
+    uses24HourClock: () => false,
+    usesMetricSystem: () => false,
+    findBestLanguageTag,
+};
+
+export {findBestLanguageTag};
+export default RNLocalize;

server/stubs/react-native-onyx.ts

@@ -0,0 +1,16 @@
+import getCjsDefaultExport from '@server/libs/getCjsDefaultExport';
+import * as OnyxNamespace from 'react-native-onyx/dist/Onyx';
+import * as useOnyxNamespace from 'react-native-onyx/dist/useOnyx';
+
+/*
+ * ESM entry for react-native-onyx in the victory-chart-renderer bundle.
+ *
+ * Bun compile cannot reliably use the package's CJS index.js re-export of the default
+ * export, so importers should keep using `react-native-onyx` while this file is wired
+ * in via rnStubPlugin.
+ */
+const Onyx = getCjsDefaultExport(OnyxNamespace);
+const useOnyx = getCjsDefaultExport(useOnyxNamespace);
+
+export {useOnyx};
+export default Onyx;

server/stubs/sentry-react-native.ts

@@ -1,6 +1,27 @@
+const noopSpan = {
+    setAttribute: () => {},
+    setAttributes: () => {},
+    setStatus: () => {},
+    end: () => {},
+};
+
+function startInactiveSpan() {
+    return noopSpan;
+}
+
+function spanToJSON() {
+    return {data: {}};
+}
+
+const logger = {
+    warn: () => {},
+};
+
 const Sentry = {
-    startInactiveSpan: () => undefined,
-    spanToJSON: () => ({data: {}}),
+    startInactiveSpan,
+    spanToJSON,
+    logger,
 };
 
+export {startInactiveSpan, spanToJSON, logger};
 export default Sentry;

server/stubs/telemetry-activeSpans.ts

@@ -1,7 +1,26 @@
+const noopSpan = {
+    setAttribute: () => {},
+    setAttributes: () => {},
+    setStatus: () => {},
+    end: () => {},
+};
+
 function startSpan() {
-    return undefined;
+    return noopSpan;
 }
 
 function endSpan() {}
 
-export {endSpan, startSpan};
+function endSpanWithAttributes() {}
+
+function getSpan() {
+    return undefined;
+}
+
+function cancelSpan() {}
+
+function cancelAllSpans() {}
+
+function cancelSpansByPrefix() {}
+
+export {startSpan, endSpan, endSpanWithAttributes, getSpan, cancelSpan, cancelAllSpans, cancelSpansByPrefix};

server/victory-chart-renderer/.gitignore

@@ -1,2 +1,3 @@
 .dev/
 dist/
+tests/__output__/

server/victory-chart-renderer/package.json

@@ -5,7 +5,7 @@
     "description": "Headless Bun CLI that renders Expensify chart XML to PNG using victory-native and Skia.",
     "scripts": {
         "dev": "bun run scripts/dev.ts",
-        "test": "bun test",
+        "test": "bun test --concurrent --max-concurrency 7",
         "build:linux": "bun run scripts/build.ts --target bun-linux-x64 --outfile dist/victory-chart-renderer-linux-x64",
         "build:linux-arm": "bun run scripts/build.ts --target bun-linux-arm64 --outfile dist/victory-chart-renderer-linux-arm64",
         "build:macos": "bun run scripts/build.ts --target bun-darwin-arm64 --outfile dist/victory-chart-renderer-darwin-arm64"

server/victory-chart-renderer/src/bootstrap.tsx

@@ -4,4 +4,5 @@ import initSkiaForCli from './initSkiaForCli';
 // The dynamic import ensures initSkiaForCli() runs first — static imports in cli.tsx
 // would otherwise be hoisted above any top-level await in this file.
 await initSkiaForCli();
+await import('./initOnyxForCli');
 await import('./cli');

server/victory-chart-renderer/src/cli.tsx

@@ -22,10 +22,18 @@ const cli = new CLI({
     },
 });
 
-const xmlString = cli.namedArgs['chart-xml'];
-const outPath = cli.namedArgs.out;
-const tnode = parseChartXml(xmlString);
-const canvasSize = resolveCanvasSize(tnode);
-const fonts = await loadChartFontsForCli();
+try {
+    const xmlString = cli.namedArgs['chart-xml'];
+    const outPath = cli.namedArgs.out;
+    const tnode = parseChartXml(xmlString);
+    const canvasSize = resolveCanvasSize(tnode);
+    const fonts = await loadChartFontsForCli();
 
-await renderChartToPng(tnode, fonts, canvasSize, outPath);
+    await renderChartToPng(tnode, fonts, canvasSize, outPath);
+
+    // Onyx and network modules register listeners/timers during init; exit explicitly so CI smoke tests do not hang.
+    process.exit(0);
+} catch (error) {
+    console.error(error instanceof Error ? error.message : error);
+    process.exit(1);
+}

server/victory-chart-renderer/src/initOnyxForCli.ts

@@ -0,0 +1,9 @@
+import Onyx from 'react-native-onyx';
+import ONYXKEYS from '@src/ONYXKEYS';
+
+Onyx.init({
+    keys: ONYXKEYS,
+    enableDevTools: false,
+    shouldSyncMultipleInstances: false,
+    ramOnlyKeys: [ONYXKEYS.RAM_ONLY_ARE_TRANSLATIONS_LOADING],
+});

server/victory-chart-renderer/src/types/bun.d.ts

@@ -82,10 +82,16 @@ type BunTestMatchers = {
 };
 
 declare module 'bun:test' {
-    function test(label: string, fn: () => void | Promise<void>): void;
-    function test(label: string, options: {timeout?: number}, fn: () => void | Promise<void>): void;
+    type BunTestFn = {
+        (label: string, fn: () => void | Promise<void>): void;
+        (label: string, options: {timeout?: number; retry?: number}, fn: () => void | Promise<void>): void;
+        concurrent: BunTestFn;
+        serial: BunTestFn;
+    };
+
+    const test: BunTestFn;
     function describe(label: string, fn: () => void): void;
-    function beforeAll(fn: () => void | Promise<void>): void;
+    function beforeAll(fn: () => void | Promise<void>, timeout?: number): void;
     function beforeEach(fn: () => void | Promise<void>): void;
     function afterAll(fn: () => void | Promise<void>): void;
     function afterEach(fn: () => void | Promise<void>): void;

server/victory-chart-renderer/tests/fixtures/monthly-spend.xml

@@ -1,8 +1,8 @@
 <victorychart width="680" height="430" domain="{x: [0.5, 12.5], y: [0, 2000]}" domainpadding="{x: 18, y: 0}" padding="{top: 126, bottom: 108, left: 96, right: 32}" style="{parent: {backgroundColor: '#F7F2EF', borderRadius: 16}}">
     <victorylabel x="32" y="40" text="Monthly spend" style="{fill: '#002E22', fontSize: 17, fontWeight: 700, fontFamily: 'Expensify Neue'}" />
-    <victorylabel x="32" y="62" text="As of: May 6, 12:49 PM PT" style="{fill: '#73857E', fontSize: 11, fontWeight: 400, fontFamily: 'Expensify Neue'}" />
-    <victoryaxis tickvalues="[1,2,3,4,5,6,7,8,9,10,11,12]" tickformat="['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']" style="{axis: {stroke: '#E6E1DA', strokeWidth: 1}, ticks: {stroke: 'transparent'}, tickLabels: {fill: '#73857E', fontSize: 11, fontWeight: 500, fontFamily: 'Expensify Neue', padding: 16}}" />
-    <victoryaxis dependentaxis tickvalues="[0,500,1000,1500,2000]" tickformat="['$0','$500','$1,000','$1,500','$2,000']" style="{axis: {stroke: 'transparent'}, ticks: {stroke: 'transparent'}, grid: {stroke: '#E6E1DA', strokeWidth: 1}, tickLabels: {fill: '#73857E', fontSize: 11, fontWeight: 500, fontFamily: 'Expensify Neue', padding: 28}}" />
+    <victorylabel x="32" y="62" text="As of: May 6, 12:49 PM PT" style="{fill: '#76847E', fontSize: 11, fontWeight: 400, fontFamily: 'Expensify Neue'}" />
+    <victoryaxis tickvalues="[1,2,3,4,5,6,7,8,9,10,11,12]" tickformat="['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']" style="{axis: {stroke: '#E6E1DA', strokeWidth: 1}, ticks: {stroke: 'transparent'}, tickLabels: {fill: '#76847E', fontSize: 11, fontWeight: 500, fontFamily: 'Expensify Neue', padding: 16}}" />
+    <victoryaxis dependentaxis tickvalues="[0,500,1000,1500,2000]" tickformat="['$0','$500','$1,000','$1,500','$2,000']" style="{axis: {stroke: 'transparent'}, ticks: {stroke: 'transparent'}, grid: {stroke: '#E6E1DA', strokeWidth: 1}, tickLabels: {fill: '#76847E', fontSize: 11, fontWeight: 500, fontFamily: 'Expensify Neue', padding: 28}}" />
     <victorybar barwidth="11" cornerradius="{top: 6, bottom: 6}" style="{data: {fill: '#1E90F2'}}" data="[{x: 1.13, y: 1080},{x: 2.13, y: 1225},{x: 3.13, y: 1375},{x: 4.13, y: 1600},{x: 5.13, y: 1630},{x: 6.13, y: 1725},{x: 7.13, y: 1400},{x: 8.13, y: 1685},{x: 9.13, y: 1725},{x: 10.13, y: 1800},{x: 11.13, y: 1800},{x: 12.13, y: 1800}]" />
     <victorybar barwidth="11" cornerradius="{top: 6, bottom: 6}" style="{data: {fill: '#13C96B'}}" data="[{x: 0.87, y: 1200},{x: 1.87, y: 1320},{x: 2.87, y: 1570}]" />
     <victorybar barwidth="11" cornerradius="{top: 6, bottom: 6}" style="{data: {fill: '#FF6A00'}}" data="[{x: 3.87, y: 1820}]" />

server/victory-chart-renderer/tests/fixtures/top-employees-by-spend.xml

@@ -1,8 +1,8 @@
 <victorychart horizontal width="680" height="464" domain="{y: [0, 18000]}" domainpadding="{x: 44, y: 16}" padding="{top: 92, bottom: 84, left: 150, right: 32}" categories="{x: ['Ethan Brooks','Sofia Ramirez','Michelina Della Donna','Priya Patel','Alex Chen']}" style="{parent: {backgroundColor: '#F7F2EF', borderRadius: 16}}">
     <victorylabel x="32" y="40" text="Top employees by spend" style="{fill: '#002E22', fontSize: 17, fontWeight: 700, fontFamily: 'Expensify Neue'}" />
-    <victorylabel x="32" y="62" text="As of: May 6, 12:49 PM PT" style="{fill: '#73857E', fontSize: 11, fontWeight: 400, fontFamily: 'Expensify Neue'}" />
-    <victoryaxis tickformat="['Ethan Brooks','Sofia Ramirez','Michelina Della Donna','Priya Patel','Alex Chen']" style="{axis: {stroke: 'transparent'}, ticks: {stroke: 'transparent'}, grid: {stroke: 'transparent'}, tickLabels: {fill: '#73857E', fontSize: 11, fontWeight: 500, fontFamily: 'Expensify Neue', padding: 24}}" />
-    <victoryaxis dependentaxis tickvalues="[0,3000,6000,9000,12000,15000,18000]" tickformat="['$0','$3,000','$6,000','$9,000','$12,000','$15,000','$18,000']" style="{axis: {stroke: 'transparent'}, ticks: {stroke: 'transparent'}, grid: {stroke: '#E6E1DA', strokeWidth: 1}, tickLabels: {fill: '#73857E', fontSize: 11, fontWeight: 500, fontFamily: 'Expensify Neue', padding: 8}}" />
+    <victorylabel x="32" y="62" text="As of: May 6, 12:49 PM PT" style="{fill: '#76847E', fontSize: 11, fontWeight: 400, fontFamily: 'Expensify Neue'}" />
+    <victoryaxis tickformat="['Ethan Brooks','Sofia Ramirez','Michelina Della Donna','Priya Patel','Alex Chen']" style="{axis: {stroke: 'transparent'}, ticks: {stroke: 'transparent'}, grid: {stroke: 'transparent'}, tickLabels: {fill: '#76847E', fontSize: 11, fontWeight: 500, fontFamily: 'Expensify Neue', padding: 24}}" />
+    <victoryaxis dependentaxis tickvalues="[0,3000,6000,9000,12000,15000,18000]" tickformat="['$0','$3,000','$6,000','$9,000','$12,000','$15,000','$18,000']" style="{axis: {stroke: 'transparent'}, ticks: {stroke: 'transparent'}, grid: {stroke: '#E6E1DA', strokeWidth: 1}, tickLabels: {fill: '#76847E', fontSize: 11, fontWeight: 500, fontFamily: 'Expensify Neue', padding: 8}}" />
     <victorygroup offset="18">
         <victorybar barwidth="16" cornerradius="{top: 8, bottom: 0}" style="{data: {fill: '#13C96B'}}" data="[{x: 'Ethan Brooks', y: 9450},{x: 'Sofia Ramirez', y: 10500},{x: 'Michelina Della Donna', y: 11900},{x: 'Priya Patel', y: 13400},{x: 'Alex Chen', y: 14300}]" />
         <victorybar barwidth="16" cornerradius="{top: 8, bottom: 0}" style="{data: {fill: '#1E90F2'}}" data="[{x: 'Ethan Brooks', y: 8800},{x: 'Sofia Ramirez', y: 10250},{x: 'Michelina Della Donna', y: 11250},{x: 'Priya Patel', y: 13900},{x: 'Alex Chen', y: 12500}]" />