From c28b86b5ff9433167c0a88b3f71966ba68ca3f11 Mon Sep 17 00:00:00 2001
From: Quantara CI <ci@quantara.xyz>
Date: Fri, 26 Jun 2026 16:06:42 +0100
Subject: [PATCH 1/2] Add RN component snapshot tests

---
 TODO.md                                       |  9 ++++++++
 jest.config.js                                |  3 +++
 .../common/Button.snapshot.test.tsx           | 17 +++++++++++++++
 src/components/common/Card.snapshot.test.tsx  | 17 +++++++++++++++
 .../SubscriptionCard.snapshot.test.tsx        | 21 +++++++++++++++++++
 5 files changed, 67 insertions(+)
 create mode 100644 TODO.md
 create mode 100644 src/components/common/Button.snapshot.test.tsx
 create mode 100644 src/components/common/Card.snapshot.test.tsx
 create mode 100644 src/components/subscription/SubscriptionCard.snapshot.test.tsx

diff --git a/TODO.md b/TODO.md
new file mode 100644
index 00000000..c5d34ed0
--- /dev/null
+++ b/TODO.md
@@ -0,0 +1,9 @@
+# TODO - Snapshot tests for key components
+
+- [ ] Ensure Jest is configured with the React Native snapshot serializer.
+- [ ] Add snapshot test for `Button`.
+- [ ] Add snapshot test for `Card`.
+- [ ] Add snapshot test for `SubscriptionCard`.
+- [ ] Run Jest to generate snapshots in version control.
+- [ ] Create git branch `blackboxai/<name>`, commit, and push to GitHub.
+
diff --git a/jest.config.js b/jest.config.js
index 16174fe5..723b5496 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -19,5 +19,8 @@ module.exports = {
     '^@react-native-community/netinfo$': '<rootDir>/src/__mocks__/@react-native-community/netinfo.js',
   },
   setupFilesAfterEnv: [],
+  // Ensure consistent React Native tree serialization for Jest snapshots.
+  snapshotSerializers: ['jest-expo/build/serializers/react-native'],
   testEnvironment: 'node',
 };
+
diff --git a/src/components/common/Button.snapshot.test.tsx b/src/components/common/Button.snapshot.test.tsx
new file mode 100644
index 00000000..7f846058
--- /dev/null
+++ b/src/components/common/Button.snapshot.test.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Platform } from 'react-native';
+import { render } from '@testing-library/react-native';
+import { Button } from './Button';
+
+describe('Button (snapshot)', () => {
+  it('renders default primary button', () => {
+    const { toJSON } = render(<Button title="Save" onPress={jest.fn()} />);
+    expect(toJSON()).toMatchSnapshot({ platform: Platform.OS });
+  });
+
+  it('renders disabled state', () => {
+    const { toJSON } = render(<Button title="Save" onPress={jest.fn()} disabled />);
+    expect(toJSON()).toMatchSnapshot({ platform: Platform.OS });
+  });
+});
+
diff --git a/src/components/common/Card.snapshot.test.tsx b/src/components/common/Card.snapshot.test.tsx
new file mode 100644
index 00000000..16895c9f
--- /dev/null
+++ b/src/components/common/Card.snapshot.test.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Platform, Text } from 'react-native';
+import { render } from '@testing-library/react-native';
+import { Card } from './Card';
+
+describe('Card (snapshot)', () => {
+  it('renders default card with children', () => {
+    const { toJSON } = render(
+      <Card accessibilityLabel="test-card">
+        <Text>Card content</Text>
+      </Card>
+    );
+
+    expect(toJSON()).toMatchSnapshot({ platform: Platform.OS });
+  });
+});
+
diff --git a/src/components/subscription/SubscriptionCard.snapshot.test.tsx b/src/components/subscription/SubscriptionCard.snapshot.test.tsx
new file mode 100644
index 00000000..dc7ac40b
--- /dev/null
+++ b/src/components/subscription/SubscriptionCard.snapshot.test.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Platform } from 'react-native';
+import { render } from '@testing-library/react-native';
+import { SubscriptionCard } from './SubscriptionCard';
+import { mockSubscription } from '../../__fixtures__/subscriptions';
+
+// Match existing behavioural tests: SubscriptionCard depends on zustand-persist + AsyncStorage.
+jest.mock('@react-native-async-storage/async-storage', () =>
+  require('@react-native-async-storage/async-storage/jest/async-storage-mock')
+);
+
+describe('SubscriptionCard (snapshot)', () => {
+  it('renders active subscription card', () => {
+    const { toJSON } = render(
+      <SubscriptionCard subscription={mockSubscription} onPress={jest.fn()} />
+    );
+
+    expect(toJSON()).toMatchSnapshot({ platform: Platform.OS });
+  });
+});
+

From 21a475e075f985c0da39eb5a1848bc5543f77612 Mon Sep 17 00:00:00 2001
From: Quantara CI <ci@quantara.xyz>
Date: Fri, 26 Jun 2026 17:29:01 +0100
Subject: [PATCH 2/2] Add snapshot tests for Button/Card/SubscriptionCard

---
 TODO.md                                       |  9 -----
 jest.config.js                                |  8 ++--
 jest.setup.js                                 | 20 ++++++++++
 package.json                                  | 10 ++---
 .../common/Button.snapshot.test.tsx           | 37 +++++++++++++++++--
 src/components/common/Card.snapshot.test.tsx  | 11 ++++--
 6 files changed, 72 insertions(+), 23 deletions(-)
 delete mode 100644 TODO.md
 create mode 100644 jest.setup.js

diff --git a/TODO.md b/TODO.md
deleted file mode 100644
index c5d34ed0..00000000
--- a/TODO.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# TODO - Snapshot tests for key components
-
-- [ ] Ensure Jest is configured with the React Native snapshot serializer.
-- [ ] Add snapshot test for `Button`.
-- [ ] Add snapshot test for `Card`.
-- [ ] Add snapshot test for `SubscriptionCard`.
-- [ ] Run Jest to generate snapshots in version control.
-- [ ] Create git branch `blackboxai/<name>`, commit, and push to GitHub.
-
diff --git a/jest.config.js b/jest.config.js
index 723b5496..19c62ddf 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -18,9 +18,11 @@ module.exports = {
     '^@/(.*)$': '<rootDir>/src/$1',
     '^@react-native-community/netinfo$': '<rootDir>/src/__mocks__/@react-native-community/netinfo.js',
   },
-  setupFilesAfterEnv: [],
-  // Ensure consistent React Native tree serialization for Jest snapshots.
-  snapshotSerializers: ['jest-expo/build/serializers/react-native'],
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  // Snapshot serialization is handled by `jest-expo` preset.
+
+
   testEnvironment: 'node',
 };
 
+
diff --git a/jest.setup.js b/jest.setup.js
new file mode 100644
index 00000000..e0a68a8b
--- /dev/null
+++ b/jest.setup.js
@@ -0,0 +1,20 @@
+// Global Jest setup for React Native snapshot/component tests.
+// Fixes:
+// - @react-native-async-storage/async-storage native module null in Jest
+// - Hermes parser crashes when RN internals are loaded during tests
+
+jest.mock('@react-native-async-storage/async-storage', () => {
+  return require('@react-native-async-storage/async-storage/jest/async-storage-mock');
+});
+
+// Mock RN Text to avoid importing RN native Text internals that can trigger
+// Hermes parser issues in Node/Jest.
+jest.mock('react-native/Libraries/Text/Text', () => {
+  const React = require('react');
+  return function MockText(props) {
+    return React.createElement('Text', props, props.children);
+  };
+});
+
+
+
diff --git a/package.json b/package.json
index 86ac0394..51cebeab 100644
--- a/package.json
+++ b/package.json
@@ -73,6 +73,7 @@
     "isr:validate:dry": "node scripts/isr-validate.js --dry-run"
   },
   "dependencies": {
+    "@graphql-tools/schema": "^10.0.31",
     "@react-native-async-storage/async-storage": "2.1.2",
     "@react-native-community/datetimepicker": "^9.1.0",
     "@react-native-community/netinfo": "11.4.1",
@@ -90,10 +91,6 @@
     "bullmq": "^5.79.1",
     "ethers": "^5.8.0",
     "expo": "~53.0.20",
-    "@graphql-tools/schema": "^10.0.31",
-    "graphql": "^16.13.2",
-    "graphql-http": "^1.22.4",
-    "pg": "^8.16.0",
     "expo-application": "~6.1.5",
     "expo-clipboard": "~7.1.5",
     "expo-dev-client": "~5.2.4",
@@ -101,8 +98,12 @@
     "expo-linking": "~7.1.7",
     "expo-notifications": "^0.31.5",
     "expo-status-bar": "~2.2.3",
+    "express": "^4.21.2",
+    "graphql": "^16.13.2",
+    "graphql-http": "^1.22.4",
     "i18next": "^26.0.8",
     "ioredis": "^5.11.1",
+    "pg": "^8.16.0",
     "react": "19.2.5",
     "react-i18next": "^17.0.6",
     "react-native": "0.85.2",
@@ -114,7 +115,6 @@
     "react-native-safe-area-context": "5.7.0",
     "react-native-screens": "~4.24.0",
     "react-native-svg": "15.15.4",
-    "express": "^4.21.2",
     "zod": "^3.23.8",
     "zustand": "^5.0.0"
   },
diff --git a/src/components/common/Button.snapshot.test.tsx b/src/components/common/Button.snapshot.test.tsx
index 7f846058..feac74a7 100644
--- a/src/components/common/Button.snapshot.test.tsx
+++ b/src/components/common/Button.snapshot.test.tsx
@@ -1,17 +1,48 @@
 import React from 'react';
 import { Platform } from 'react-native';
 import { render } from '@testing-library/react-native';
-import { Button } from './Button';
+
+import { ThemeProvider } from '../../context/ThemeContext';
+
+import { Button as ButtonComponent } from './Button';
+
+jest.mock('../../hooks/useThemeColors', () => ({
+  useThemeColors: () => ({
+    brand: { primary: '#000000', secondary: '#111111' },
+    accent: '#222222',
+    status: { error: '#ff0000' },
+    onPrimary: '#ffffff',
+    onSecondary: '#ffffff',
+    background: { card: '#ffffff' },
+    border: { default: '#cccccc' },
+  }),
+}));
+
+
 
 describe('Button (snapshot)', () => {
   it('renders default primary button', () => {
-    const { toJSON } = render(<Button title="Save" onPress={jest.fn()} />);
+
+
+
+    const { toJSON } = render(
+      <ThemeProvider>
+        <ButtonComponent title="Save" onPress={jest.fn()} />
+      </ThemeProvider>
+    );
+
     expect(toJSON()).toMatchSnapshot({ platform: Platform.OS });
   });
 
   it('renders disabled state', () => {
-    const { toJSON } = render(<Button title="Save" onPress={jest.fn()} disabled />);
+    const { toJSON } = render(
+      <ThemeProvider>
+        <ButtonComponent title="Save" onPress={jest.fn()} disabled />
+      </ThemeProvider>
+    );
+
     expect(toJSON()).toMatchSnapshot({ platform: Platform.OS });
   });
 });
 
+
diff --git a/src/components/common/Card.snapshot.test.tsx b/src/components/common/Card.snapshot.test.tsx
index 16895c9f..0b6d2bf7 100644
--- a/src/components/common/Card.snapshot.test.tsx
+++ b/src/components/common/Card.snapshot.test.tsx
@@ -1,17 +1,22 @@
 import React from 'react';
 import { Platform, Text } from 'react-native';
 import { render } from '@testing-library/react-native';
+
 import { Card } from './Card';
+import { ThemeProvider } from '../../context/ThemeContext';
 
 describe('Card (snapshot)', () => {
   it('renders default card with children', () => {
     const { toJSON } = render(
-      <Card accessibilityLabel="test-card">
-        <Text>Card content</Text>
-      </Card>
+      <ThemeProvider>
+        <Card accessibilityLabel="test-card">
+          <Text>Card content</Text>
+        </Card>
+      </ThemeProvider>
     );
 
     expect(toJSON()).toMatchSnapshot({ platform: Platform.OS });
   });
 });
 
+