cometchat-native-testing

--- name: cometchat-native-testing description: "Testing patterns for CometChat React Native — Jest + React Native Testing Library setup, mocking the UI Kit + SDK, testing custom bubbles / headers / composer actions, snapshot pitfalls, E2E with Detox vs Maestro, and CI integration. Covers what to test vs what to skip." license: "MIT" compatibility: "Node.js >=18; React Native >=0.70; @cometchat/chat-uikit-react-native ^5; Jest ^29; @testing-library/react-native ^12" allowed-tools: "executeBash, readFile, fileSearch, listDirectory" metadata: author: "CometChat" version: "1.0.0" tags: "cometchat react-native testing jest rnt detox maestro ci" ---

## Purpose

Teaches Claude how to write and run tests against a CometChat React Native integration. Covers:

- Unit / component tests with Jest + React Native Testing Library (RNTL) - How to mock `@cometchat/chat-uikit-react-native` and `@cometchat/chat-sdk-react-native` (both pull in native modules that fail in Node's jest-expo / jest-react-native environments) - Testing custom bubbles, headers, composer actions, empty states - Snapshot testing pitfalls specific to theme-driven components - E2E with Detox (iOS + Android native drivers) vs Maestro (declarative YAML) - Which tests catch real regressions vs which are flaky churn

Ground truth: `@cometchat/chat-uikit-react-native@5.3.3`'s example jest config (`examples/SampleAppWithPushNotifications/jest.config.js`) and the standard RN testing toolkit docs (callstack.github.io/react-native-testing-library, wix.github.io/Detox, maestro.mobile.dev).

---

## 1. What to test, what to skip

Not every test is worth the maintenance cost. A few rules of thumb:

**Worth testing:** - Custom components you wrote (custom bubble, custom header, empty-state view) - Navigation logic triggered by CometChat events (push tap → deep-link) - Message render logic with text formatters - Your provider chain wires correctly (four-wrapper order, init called, login called) - Production auth token refresh + retry logic - User-ID mapping (Firebase UID → CometChat UID)

**Skip:** - UI Kit internals — that's the UI Kit's responsibility. Testing `<CometChatConversations>` renders a list is testing CometChat's code. - Realtime delivery (A sends, B receives) — requires real servers; flaky and slow; use manual QA or E2E with real accounts. - Presence / typing indicators — race-prone, depend on socket state. - Snapshot tests of CometChat components — theme changes, UI Kit updates, and `cometchat-native-theming` edits all churn the snapshots with no real signal. - Native module calls (camera, picker) — Jest's mocks already return stubs; testing them verifies the mock, not the integration.

The golden rule: if the test fails because **your code** changed, it's valuable. If it fails because **the UI Kit updated** or **a network blip happened**, it's churn.

---

## 2. Toolchain

| Layer | Tool | Why | |---|---|---| | Unit + component tests | Jest + `@testing-library/react-native` | The RN default. Preset handles metro module resolution. | | Mocking | Jest `moduleNameMapper` + manual mocks | UI Kit imports native modules — can't run real components in a Node env. | | Snapshot | Jest's built-in | Use sparingly — see §7 | | E2E | Maestro OR Detox | See §10 for tradeoff | | CI | GitHub Actions / EAS / Bitrise | §11 |

Install: ```bash # Bare RN npm install --save-dev jest @testing-library/react-native @testing-library/jest-native \ react-test-renderer @types/jest

# Expo npx expo install --dev jest-expo @testing-library/react-native @testing-library/jest-native \ react-test-renderer ```

`jest-expo` wraps `react-native` preset with Expo-specific module resolution (handles `expo-modules-core`, `expo-router`, etc.).

---

## 3. Jest config

**Bare RN** — `jest.config.js`: ```js module.exports = { preset: "react-native", setupFilesAfterEach: ["<rootDir>/jest.setup.ts"], transformIgnorePatterns: [ "node_modules/(?!(?:react-native|@react-native|@react-navigation|" + "@cometchat/chat-uikit-react-native|@cometchat/chat-sdk-react-native|" + "react-native-.+|@notifee/react-native)/)", ], moduleNameMapper: { "^@cometchat/chat-uikit-react-native$": "<rootDir>/__mocks__/cometchat-uikit.ts", "^@cometchat/chat-sdk-react-native$": "<rootDir>/__mocks__/cometchat-sdk.ts", }, }; ```

**Expo** — `jest.config.js`: ```js module.exports = { preset: "jest-expo", setupFilesAfterEach: ["<rootDir>/jest.setup.ts"], transformIgnorePatterns: [ "node_modules/(?!(?:(jest-)?react-native|@react-native|expo(nent)?|@expo(nent)?/.*|" + "@expo-google-fonts/.*|react-navigation|@react-navigation/.*|" + "@cometchat/chat-uikit-react-native|@cometchat/chat-sdk-react-native|" + "@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)/)", ], moduleNameMapper: { "^@cometchat/chat-uikit-react-native$": "<rootDir>/__mocks__/cometchat-uikit.ts", "^@cometchat/chat-sdk-react-native$": "<rootDir>/__mocks__/cometchat-sdk.ts", }, }; ```

**`transformIgnorePatterns` matters.** By default Jest doesn't transform anything under `node_modules`, but CometChat ships ES module source. Without the pattern, Jest errors with `SyntaxError: Unexpected token 'export'`. The UI Kit + SDK names must be in the allow list.

---

## 4. Global setup — `jest.setup.ts`

```ts import "@testing-library/jest-native/extend-expect";

// Silence RN's "AnimatedValue" warning noise in tests jest.mock("react-native/Libraries/Animated/NativeAnimatedHelper");

// Mock native modules that the UI Kit pulls in jest.mock("react-native-gesture-handler", () => { const View = require("react-native/Libraries/Components/View/View"); return { GestureHandlerRootView: View, PanGestureHandler: View, TapGestureHandler: View, State: {}, Directions: {}, }; });

jest.mock("react-native-reanimated", () => require("react-native-reanimated/mock"), );

jest.mock("react-native-safe-area-context", () => ({ SafeAreaProvider: ({ children }: { children: React.ReactNode }) => children, SafeAreaView: ({ children }: { children: React.ReactNode }) => children, useSafeAreaInsets: () => ({ top: 0, right: 0, bottom: 0, left: 0 }), }));

// Silence console.warn from legacy components in tests — re-enable locally if debugging const originalWarn = console.warn; console.warn = (...args: unknown[]) => { if ( typeof args[0] === "string" && /componentWill|Unable to find|act\(\)/i.test(args[0]) ) { return; } originalWarn(...args); }; ```

---

## 5. Mocking the UI Kit

The UI Kit's top-level components (`CometChatConversations`, `CometChatMessageList`, etc.) wire socket listeners, call native modules, and render FlatLists with async data. Rendering them in Jest is more effort than value.

**Strategy: mock them as transparent Views that forward children.** This lets your tests verify your integration (are the right props being passed? does the right component mount in the right screen?) without pulling in the real implementation.

`__mocks__/cometchat-uikit.ts`: ```ts import React from "react"; import { View } from "react-native";

const passThrough = (name: string) => React.forwardRef<unknown, Record<string, unknown>>((props, ref) => { const { children, ...rest } = props as { children?: React.ReactNode }; return ( <View ref={ref as never} testID={name} {...rest}> {children} </View> ); });

export const CometChatUIKit = { init: jest.fn(async () => undefined), login: jest.fn(async () => ({ getUid: () => "cometchat-uid-1" })), logout: jest.fn(async () => undefined), getLoggedinUser: jest.fn(async () => ({ getUid: () => "cometchat-uid-1" })), };

export const UIKitSettingsBuilder = class { setAppId() { return this; } setRegion() { return this; } setAuthKey() { return this; } subscribePresenceForAllUsers() { return this; } build() { return {}; } };

export const CometChatThemeProvider = passThrough("CometChatThemeProvider"); export const CometChatI18nProvider = passThrough("CometChatI18nProvider"); export const CometChatConversations = passThrough("CometChatConversations"); export const CometChatMessageList = passThrough("CometChatMessageList"); export const CometChatMessageComposer = passThrough("CometChatMessageComposer"); export const CometChatMessageHeader = passThrough("CometChatMessageHeader"); export const CometChatUsers = passThrough("CometChatUsers"); export const CometChatGroups = passThrough("CometChatGroups"); export const CometChatIncomingCall = passThrough("CometChatIncomingCall"); export const CometChatOutgoingCall = passThrough("CometChatOutgoingCall");

export const CometChatUIEventHandler = { addUIListener: jest.fn(), removeListener: jest.fn(), }; export const CometChatUIEvents = {};

export const useTheme = () => ({ color: { primary: "#6852D6", background1: "#FFFFFF", textPrimary: "#141414", }, typography: { heading1: { fontFamily: "System", fontSize: 28 }, body1: { fontFamily: "System", fontSize: 16 }, }, }); ```

`__mocks__/cometchat-sdk.ts`: ```ts export const CometChat = { getUser: jest.fn(async (uid: string) => ({ getUid: () => uid, getName: () => "Test User" })), getGroup: jest.fn(async (guid: string) => ({ getGuid: () => guid, getName: () => "Test Group" })), addMessageListener: jest.fn(), removeMessageListener: jest.fn(), };

export const CometChatNotifications = { PushPlatforms: { FCM_REACT_NATIVE_ANDROID: "fcm-android", FCM_REACT_NATIVE_IOS: "fcm-ios", APNS_REACT_NATIVE_DEVICE: "apns-device", APNS_REACT_NATIVE_VOIP: "apns-voip", }, registerPushToken: jest.fn(async () => ({ success: true })), unregisterPushToken: jest.fn(async () => ({ success: true })), }; ```

Every real `<CometChatMessageList>` in your code renders as `<View testID="CometChatMessageList">` in tests. You can assert on `testID` + the props you passed.

---

## 6. Testing a custom component

Example — a custom chat screen that renders `<CometChatMessageList>` for a specific user:

```tsx // src/screens/MessagesScreen.tsx import { CometChat } from "@cometchat/chat-sdk-react-native"; import { CometChatMessageList } from "@cometchat/chat-uikit-react-native"; import { useEffect, useState } from "react";

export function MessagesScreen({ uid }: { uid: string }) { const [user, setUser] = useState<CometChat.User | null>(null);

useEffect(() => { CometChat.getUser(uid).then(setUser); }, [uid]);

if (!user) return null;

return <CometChatMessageList user={user} hideReplyInThreadOption />; } ```

Test: ```tsx // src/screens/__tests__/MessagesScreen.test.tsx import { render, waitFor } from "@testing-library/react-native"; import { CometChat } from "@cometchat/chat-sdk-react-native"; import { MessagesScreen } from "../MessagesScreen";

test("fetches user then renders MessageList", async () => { const { getByTestId, queryByTestId } = render(<MessagesScreen uid="alice" />);

// Before fetch resolves — nothing rendered expect(queryByTestId("CometChatMessageList")).toBeNull();

// After fetch resolves — list renders with user prop await waitFor(() => expect(getByTestId("CometChatMessageList")).toBeTruthy());

expect(CometChat.getUser).toHaveBeenCalledWith("alice"); });

test("passes hideReplyInThreadOption to MessageList", async () => { const { findByTestId } = render(<MessagesScreen uid="alice" />); const list = await findByTestId("CometChatMessageList");

// The mocked component stored props on the View — check them expect(list.props.hideReplyInThreadOption).toBe(true); }); ```

The second test is the valuable one — it guards the mandatory `hideReplyInThreadOption` flag (hard rule §4 in `cometchat-native-core`) against a future refactor dropping it.

---

## 7. Snapshot testing — use sparingly

**Do snapshot:** - Pure presentational components with no UI Kit dependency - Custom bubble renderers with fixed inputs - Data transforms (message → display string)

**Don't snapsh