{"id":"7b46ccc9-0f44-4637-b277-ac8ff1fda70a","shortId":"ky3gCR","kind":"skill","title":"cometchat-react-testing","tagline":"Testing patterns for CometChat React UI Kit v6 in Vite / Next.js / React Router / Astro projects. Covers Vitest + React Testing Library setup, mocking @cometchat/chat-sdk-javascript and @cometchat/chat-uikit-react, Playwright e2e for full chat flows, the chat-specific assertions ","description":"## Purpose\n\nTest recipes for CometChat React UI Kit integrations. Three layers — unit, component, e2e — three different mocking strategies. This skill writes the configuration and the canonical assertions; real test bodies are app-specific.\n\n**Read these other skills first:**\n- `cometchat-core` — init, login, provider patterns the tests assert against\n- `cometchat-{react,nextjs,react-router,astro}-patterns` — framework-specific render gates\n- `cometchat-react-calls/references/testing-calls-on-web.md` — the calls-specific testing patterns (this skill is for chat)\n\n**Ground truth:**\n- Vitest docs — https://vitest.dev/\n- React Testing Library — https://testing-library.com/docs/react-testing-library/intro\n- Playwright — https://playwright.dev/\n\n---\n\n## 1. Vitest setup\n\n### Install\n\n```bash\nnpm install -D vitest @testing-library/react @testing-library/jest-dom @testing-library/user-event jsdom\n```\n\n### `vitest.config.ts`\n\n```ts\nimport { defineConfig } from \"vitest/config\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({\n  plugins: [react()],\n  test: {\n    environment: \"jsdom\",\n    globals: true,\n    setupFiles: [\"./vitest.setup.ts\"],\n    css: false,                                    // skip CSS imports — we test behavior, not styles\n    exclude: [\"**/node_modules/**\", \"**/e2e/**\"],  // e2e runs separately under Playwright\n  },\n});\n```\n\n### `vitest.setup.ts`\n\n```ts\nimport \"@testing-library/jest-dom/vitest\";\nimport { vi, beforeAll, afterEach } from \"vitest\";\nimport { cleanup } from \"@testing-library/react\";\n\nafterEach(() => cleanup());\n\n// jsdom doesn't have WebSocket — polyfill if any test code reaches that far\nif (!(\"WebSocket\" in globalThis)) {\n  (globalThis as Record<string, unknown>).WebSocket = class FakeWS {\n    addEventListener() {}\n    removeEventListener() {}\n    send() {}\n    close() {}\n  };\n}\n\n// Polyfill matchMedia for component tests using responsive UI Kit components\nbeforeAll(() => {\n  Object.defineProperty(window, \"matchMedia\", {\n    writable: true,\n    value: vi.fn().mockImplementation((query: string) => ({\n      matches: false,\n      media: query,\n      onchange: null,\n      addEventListener: vi.fn(),\n      removeEventListener: vi.fn(),\n      dispatchEvent: vi.fn(),\n    })),\n  });\n});\n```\n\n---\n\n## 2. Mocking the SDK\n\n### Hoisted module mock\n\n```ts\n// __tests__/mocks/cometchat.ts\nimport { vi } from \"vitest\";\n\nexport const mockUser = { uid: \"cometchat-uid-1\", name: \"Alice\" };\n\nvi.mock(\"@cometchat/chat-sdk-javascript\", () => ({\n  CometChat: {\n    init: vi.fn().mockResolvedValue(true),\n    login: vi.fn().mockResolvedValue(mockUser),\n    logout: vi.fn().mockResolvedValue(true),\n    getLoggedinUser: vi.fn().mockResolvedValue(mockUser),\n    addMessageListener: vi.fn(),\n    removeMessageListener: vi.fn(),\n    AppSettingsBuilder: class {\n      subscribePresenceForAllUsers() { return this; }\n      setRegion() { return this; }\n      build() { return {}; }\n    },\n    REGION: { US: \"us\", EU: \"eu\", IN: \"in\" },\n  },\n}));\n\nvi.mock(\"@cometchat/chat-uikit-react\", () => ({\n  CometChatUIKit: {\n    init: vi.fn().mockResolvedValue(true),\n    login: vi.fn().mockResolvedValue(mockUser),\n    getLoggedinUser: vi.fn().mockResolvedValue(mockUser),\n  },\n  UIKitSettingsBuilder: class {\n    setAppId() { return this; }\n    setRegion() { return this; }\n    setAuthKey() { return this; }\n    subscribePresenceForAllUsers() { return this; }\n    build() { return {}; }\n  },\n  CometChatConversations: () => null,\n  CometChatMessageList: () => null,\n  CometChatMessageHeader: () => null,\n  CometChatMessageComposer: () => null,\n  CometChatUsers: () => null,\n  CometChatGroups: () => null,\n  CometChatIncomingCall: () => null,\n  CometChatThemeProvider: ({ children }: { children: React.ReactNode }) => children,\n}));\n```\n\nImport this from any test file:\n\n```ts\nimport \"./mocks/cometchat\";\n```\n\n### Per-test override\n\nOverride specific behaviors:\n\n```ts\nimport { CometChat } from \"@cometchat/chat-sdk-javascript\";\n\nit(\"shows error when login fails\", async () => {\n  vi.mocked(CometChat.login).mockRejectedValueOnce(new Error(\"401 Unauthorized\"));\n  render(<CometChatProvider />);\n  await screen.findByText(/login failed/i);\n});\n```\n\n---\n\n## 3. Component-test assertions\n\n### Init resolves before children render\n\n```tsx\nimport { render, screen } from \"@testing-library/react\";\nimport { CometChat } from \"@cometchat/chat-sdk-javascript\";\nimport { CometChatProvider } from \"../src/cometchat/CometChatProvider\";\n\nit(\"does not render children until login resolves\", async () => {\n  let resolveLogin: (user: unknown) => void = () => {};\n  vi.mocked(CometChat.login).mockImplementation(() =>\n    new Promise((resolve) => { resolveLogin = resolve; })\n  );\n\n  render(\n    <CometChatProvider>\n      <div data-testid=\"children\">app contents</div>\n    </CometChatProvider>\n  );\n\n  // Children should NOT be present yet\n  expect(screen.queryByTestId(\"children\")).not.toBeInTheDocument();\n\n  // Resolve login\n  resolveLogin({ uid: \"cometchat-uid-1\" });\n\n  await screen.findByTestId(\"children\");\n});\n```\n\n### Error UI visible on init failure\n\n```tsx\nit(\"renders red error UI when init fails\", async () => {\n  vi.mocked(CometChat.init).mockRejectedValueOnce(new Error(\"Network down\"));\n\n  render(<CometChatProvider><div>app</div></CometChatProvider>);\n\n  const error = await screen.findByText(/network down/i);\n  expect(error).toBeInTheDocument();\n  // The skill's rule: errors must be visible in red — assert color\n  expect(error.closest(\"[style*='color']\")).toHaveStyle(\"color: red\");\n});\n```\n\n### No Auth Key in test files\n\nA meta-test that runs against the project's source:\n\n```ts\nimport { readFileSync } from \"node:fs\";\nimport { glob } from \"glob\";\n\nit(\"no Auth Key hardcoded in source files\", async () => {\n  const files = await glob(\"src/**/*.{ts,tsx,js,jsx}\");\n  const hexKeyPattern = /[a-f0-9]{32,}/;\n\n  for (const file of files) {\n    const content = readFileSync(file, \"utf8\");\n    const matches = content.match(hexKeyPattern);\n    if (matches) {\n      // Allow comment / env var name mentions\n      const lines = content.split(\"\\n\");\n      const realHits = lines.filter(line =>\n        hexKeyPattern.test(line) && !line.trim().startsWith(\"//\") && !line.includes(\"AUTH_KEY\")\n      );\n      expect(realHits, `Possible Auth Key in ${file}: ${realHits.join(\"\\n\")}`).toHaveLength(0);\n    }\n  }\n});\n```\n\n### `css-variables.css` imported exactly once\n\n```ts\nit(\"css-variables.css imported exactly once\", async () => {\n  const files = await glob(\"src/**/*.{ts,tsx,css}\");\n  let count = 0;\n\n  for (const file of files) {\n    const content = readFileSync(file, \"utf8\");\n    if (content.includes(\"@cometchat/chat-uikit-react/css-variables.css\")) {\n      count++;\n    }\n  }\n\n  expect(count).toBe(1);\n});\n```\n\n---\n\n## 4. Playwright e2e\n\n### Install\n\n```bash\nnpm install -D @playwright/test\nnpx playwright install\n```\n\n### `playwright.config.ts`\n\n```ts\nimport { defineConfig, devices } from \"@playwright/test\";\n\nexport default defineConfig({\n  testDir: \"./e2e\",\n  use: {\n    baseURL: process.env.E2E_BASE_URL ?? \"http://localhost:5173\",\n    trace: \"on-first-retry\",\n  },\n  projects: [\n    { name: \"chromium\", use: devices[\"Desktop Chrome\"] },\n    { name: \"firefox\",  use: devices[\"Desktop Firefox\"] },\n  ],\n  webServer: {\n    command: \"npm run dev\",\n    url: \"http://localhost:5173\",\n    reuseExistingServer: !process.env.CI,\n  },\n});\n```\n\n### Two-page chat smoke test\n\n```ts\nimport { test, expect, type Page } from \"@playwright/test\";\n\nasync function loginAs(page: Page, uid: string) {\n  await page.goto(\"/\");\n  await page.evaluate((uid) => localStorage.setItem(\"cc-test-uid\", uid), uid);\n  await page.reload();\n  await expect(page.getByText(\"Welcome\")).toBeVisible({ timeout: 10_000 });\n}\n\ntest(\"two users send messages back and forth\", async ({ browser }) => {\n  const aliceCtx = await browser.newContext();\n  const bobCtx = await browser.newContext();\n  const alice = await aliceCtx.newPage();\n  const bob = await bobCtx.newPage();\n\n  await loginAs(alice, \"cometchat-uid-1\");\n  await loginAs(bob, \"cometchat-uid-2\");\n\n  await alice.goto(\"/messages\");\n  await alice.getByRole(\"button\", { name: \"cometchat-uid-2\" }).click();\n  await alice.getByPlaceholder(\"Type a message\").fill(\"Hello Bob\");\n  await alice.getByRole(\"button\", { name: \"Send\" }).click();\n\n  await bob.goto(\"/messages\");\n  await bob.getByRole(\"button\", { name: \"cometchat-uid-1\" }).click();\n  await expect(bob.getByText(\"Hello Bob\")).toBeVisible({ timeout: 10_000 });\n});\n```\n\nThe 10-second timeout is generous — message delivery via WebSocket is usually <500ms but CI hosts have variable latency.\n\n### Test users\n\nCometChat dev mode pre-seeds five test users (`cometchat-uid-1` through `cometchat-uid-5`). Use them in e2e — never create new users in the test app via `Auth Key` flows that leak credentials.\n\n---\n\n## 5. CI configuration\n\n### GitHub Actions\n\n```yaml\nname: tests\non: [push, pull_request]\n\njobs:\n  unit:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v4\n      - uses: actions/setup-node@v4\n        with: { node-version: 20, cache: npm }\n      - run: npm ci\n      - run: npm run test               # Vitest\n        env:\n          # Test app credentials — never your prod app\n          VITE_COMETCHAT_APP_ID:    ${{ secrets.TEST_COMETCHAT_APP_ID }}\n          VITE_COMETCHAT_REGION:    ${{ secrets.TEST_COMETCHAT_REGION }}\n          VITE_COMETCHAT_AUTH_KEY:  ${{ secrets.TEST_COMETCHAT_AUTH_KEY }}\n\n  e2e:\n    runs-on: ubuntu-latest\n    needs: unit\n    steps:\n      - uses: actions/checkout@v4\n      - uses: actions/setup-node@v4\n        with: { node-version: 20, cache: npm }\n      - run: npm ci\n      - run: npx playwright install --with-deps chromium firefox\n      - run: npm run test:e2e\n        env:\n          VITE_COMETCHAT_APP_ID:    ${{ secrets.TEST_COMETCHAT_APP_ID }}\n          VITE_COMETCHAT_REGION:    ${{ secrets.TEST_COMETCHAT_REGION }}\n          VITE_COMETCHAT_AUTH_KEY:  ${{ secrets.TEST_COMETCHAT_AUTH_KEY }}\n      - if: failure()\n        uses: actions/upload-artifact@v4\n        with:\n          name: playwright-report\n          path: playwright-report/\n```\n\n**Critical:** use a **dedicated test app** (Dashboard → New App → \"ci-tests\") for CI. Never share with production. Rotate Auth Key if a CI log accidentally captures it.\n\n---\n\n## 6. Anti-patterns\n\n1. **Mocking `<CometChatConversations />`** with a real implementation. Tests pass because your mock works; production breaks because the real component doesn't. Mock as `() => null` and test the wiring around it.\n2. **Skipping `cleanup()` between tests.** State leaks between tests; flakes appear. Always run `afterEach(cleanup)`.\n3. **Asserting on internal CSS classes** like `.cc-message-list__bubble`. Brittle to UI Kit upgrades. Assert on text/role/test-id instead.\n4. **Hardcoding the Auth Key** in test files. Even if the test app is throwaway, code grep eventually exposes it. Use env vars + GitHub secrets.\n5. **Running e2e against the same app as dev.** Test data piles up in your dashboard. Separate apps.\n6. **Skipping the \"init resolves before render\" assertion.** Catches the most common production bug — a component that mounts before login finishes and throws. Worth its weight every time.\n\n## 7. Verification checklist\n\n- [ ] `vitest.config.ts` with `environment: \"jsdom\"`\n- [ ] `vitest.setup.ts` with cleanup + matchMedia polyfill\n- [ ] Hoisted SDK mock module (don't repeat per-test)\n- [ ] At least one test for \"init resolves before children render\"\n- [ ] At least one test for \"error UI visible on init failure\"\n- [ ] Meta-test: no Auth Key in source\n- [ ] Meta-test: css-variables.css imported once\n- [ ] Playwright config + at least one two-page chat smoke\n- [ ] CI config separates unit + e2e, uses dedicated test app credentials\n- [ ] No `.skip()` / `.only()` left in committed test files\n\n## 8. Pointers\n\n- `cometchat-react-calls/references/testing-calls-on-web.md` — calls-specific testing patterns\n- `cometchat-core` — init/login patterns the tests assert against\n- `cometchat-troubleshooting` — when tests pass but the integration is still broken","tags":["cometchat","react","testing","skills","agent-skills","ai-agent","chat","claude-code","cursor","messaging","nextjs","react-native"],"capabilities":["skill","source-cometchat","skill-cometchat-react-testing","topic-agent-skills","topic-ai-agent","topic-chat","topic-claude-code","topic-cometchat","topic-cursor","topic-messaging","topic-nextjs","topic-react","topic-react-native","topic-ui-kit"],"categories":["cometchat-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/cometchat/cometchat-skills/cometchat-react-testing","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add cometchat/cometchat-skills","source_repo":"https://github.com/cometchat/cometchat-skills","install_from":"skills.sh"}},"qualityScore":"0.463","qualityRationale":"deterministic score 0.46 from registry signals: · indexed on github topic:agent-skills · 27 github stars · SKILL.md body (12,090 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:04:56.193Z","embedding":null,"createdAt":"2026-05-18T07:04:29.966Z","updatedAt":"2026-05-18T19:04:56.193Z","lastSeenAt":"2026-05-18T19:04:56.193Z","tsv":"'/docs/react-testing-library/intro':130 '/e2e':189,722 '/jest-dom':149 '/jest-dom/vitest':201 '/login':431 '/messages':844,870 '/mocks/cometchat':401 '/mocks/cometchat.ts':288 '/network':535 '/node_modules':188 '/react':145,214,451 '/references/testing-calls-on-web.md':108,1355 '/src/cometchat/cometchatprovider':459 '/user-event':153 '/vitest.setup.ts':176 '0':658,680 '000':801,888 '1':133,300,502,698,834,878,922,1128 '10':800,887,890 '2':279,841,852,1157 '20':978,1039 '3':433,1172 '32':610 '4':699,1193 '401':426 '5':927,947,1218 '500ms':901 '5173':730,756 '6':1124,1236 '7':1264 '8':1349 '9':609 'a-f0':606 'accident':1121 'action':951 'actions/checkout':969,1030 'actions/setup-node':972,1033 'actions/upload-artifact':1085 'addeventlisten':242,273 'addmessagelisten':322 'aftereach':205,215,1170 'alic':302,821,830 'alice.getbyplaceholder':855 'alice.getbyrole':846,863 'alice.goto':843 'alicectx':813 'alicectx.newpage':823 'allow':627 'alway':1168 'anti':1126 'anti-pattern':1125 'app':73,483,530,939,991,996,999,1003,1062,1066,1101,1104,1205,1224,1235,1339 'app-specif':72 'appear':1167 'appsettingsbuild':326 'around':1155 'assert':40,67,89,437,550,1173,1189,1243,1368 'astro':18,97 'async':420,468,521,594,669,773,810 'auth':560,588,646,651,941,1013,1017,1076,1080,1115,1196,1311 'await':429,503,533,597,672,780,782,792,794,814,818,822,826,828,835,842,845,854,862,868,871,880 'back':807 'base':727 'baseurl':724 'bash':137,703 'beforeal':204,256 'behavior':184,408 'bob':825,837,861,884 'bob.getbyrole':872 'bob.getbytext':882 'bob.goto':869 'bobctx':817 'bobctx.newpage':827 'bodi':70 'break':1141 'brittl':1184 'broken':1381 'browser':811 'browser.newcontext':815,819 'bubbl':1183 'bug':1249 'build':334,372 'button':847,864,873 'cach':979,1040 'call':107,111,1354,1357 'calls-specif':110,1356 'canon':66 'captur':1122 'catch':1244 'cc':787,1180 'cc-message-list':1179 'cc-test-uid':786 'chat':34,38,119,762,1329 'chat-specif':37 'checklist':1266 'children':389,390,392,441,464,485,493,505,1294 'chrome':742 'chromium':738,1052 'ci':903,948,983,1044,1106,1109,1119,1331 'ci-test':1105 'class':240,327,359,1177 'cleanup':209,216,1159,1171,1273 'click':853,867,879 'close':245 'code':226,1208 'color':551,555,557 'cometchat':2,8,45,81,91,105,298,305,411,453,500,832,839,850,876,910,920,925,998,1002,1006,1009,1012,1016,1061,1065,1069,1072,1075,1079,1352,1362,1371 'cometchat-cor':80,1361 'cometchat-react-cal':104,1351 'cometchat-react-test':1 'cometchat-troubleshoot':1370 'cometchat-uid':297,499,831,838,849,875,919,924 'cometchat.init':523 'cometchat.login':422,475 'cometchat/chat-sdk-javascript':27,304,413,455 'cometchat/chat-uikit-react':29,344 'cometchat/chat-uikit-react/css-variables.css':693 'cometchatconvers':374 'cometchatgroup':384 'cometchatincomingcal':386 'cometchatmessagecompos':380 'cometchatmessagehead':378 'cometchatmessagelist':376 'cometchatprovid':457 'cometchatthemeprovid':388 'cometchatuikit':345 'cometchatus':382 'command':750 'comment':628 'commit':1346 'common':1247 'compon':53,249,255,435,1145,1251 'component-test':434 'config':1322,1332 'configur':63,949 'const':294,531,595,604,612,616,621,633,637,670,682,686,812,816,820,824 'content':484,617,687 'content.includes':692 'content.match':623 'content.split':635 'core':82,1363 'count':679,694,696 'cover':20 'creat':933 'credenti':946,992,1340 'critic':1096 'css':177,180,677,1176 'css-variables.css':659,665,1318 'd':140,706 'dashboard':1102,1233 'data':1228 'dedic':1099,1337 'default':166,719 'defineconfig':158,167,714,720 'deliveri':896 'dep':1051 'desktop':741,747 'dev':753,911,1226 'devic':715,740,746 'differ':56 'dispatchev':277 'doc':123 'doesn':218,1146 'down/i':536 'e2e':31,54,190,701,726,931,1019,1058,1220,1335 'env':629,989,1059,1214 'environ':171,1269 'error':416,425,506,516,526,532,538,544,1301 'error.closest':553 'eu':339,340 'even':1201 'eventu':1210 'everi':1262 'exact':661,667 'exclud':187 'expect':491,537,552,648,695,768,795,881 'export':165,293,718 'expos':1211 'f0':608 'fail':419,520 'failed/i':432 'failur':511,1083,1306 'fakew':241 'fals':178,268 'far':229 'file':398,564,593,596,613,615,619,654,671,683,685,689,1200,1348 'fill':859 'finish':1256 'firefox':744,748,1053 'first':79,734 'five':916 'flake':1166 'flow':35,943 'forth':809 'framework':100 'framework-specif':99 'fs':581 'full':33 'function':774 'gate':103 'generous':894 'getloggedinus':318,354 'github':950,1216 'glob':583,585,598,673 'global':173 'globalthi':233,234 'grep':1209 'ground':120 'hardcod':590,1194 'hello':860,883 'hexkeypattern':605,624 'hexkeypattern.test':641 'hoist':283,1276 'host':904 'id':1000,1004,1063,1067 'implement':1133 'import':157,161,181,197,202,208,289,393,400,410,444,452,456,577,582,660,666,713,766,1319 'init':83,306,346,438,510,519,1239,1291,1305 'init/login':1364 'instal':136,139,702,705,710,1048 'instead':1192 'integr':49,1378 'intern':1175 'job':959 'js':602 'jsdom':154,172,217,1270 'jsx':603 'key':561,589,647,652,942,1014,1018,1077,1081,1116,1197,1312 'kit':11,48,254,1187 'latenc':907 'latest':966,1025 'layer':51 'leak':945,1163 'least':1287,1297,1324 'left':1344 'let':469,678 'librari':24,127,144,148,152,200,213,450 'like':1178 'line':634,640,642 'line.includes':645 'line.trim':643 'lines.filter':639 'list':1182 'localhost':729,755 'localstorage.setitem':785 'log':1120 'login':84,310,350,418,466,496,1255 'logina':775,829,836 'logout':314 'match':267,622,626 'matchmedia':247,259,1274 'media':269 'mention':632 'messag':806,858,895,1181 'meta':567,1308,1316 'meta-test':566,1307,1315 'mock':26,57,280,285,1129,1138,1148,1278 'mockimplement':264,476 'mockrejectedvalueonc':423,524 'mockresolvedvalu':308,312,316,320,348,352,356 'mockus':295,313,321,353,357 'mode':912 'modul':284,1279 'mount':1253 'must':545 'n':636,656 'name':301,631,737,743,848,865,874,953,1088 'need':1026 'network':527 'never':932,993,1110 'new':424,477,525,934,1103 'next.js':15 'nextj':93 'node':580,976,1037 'node-vers':975,1036 'not.tobeinthedocument':494 'npm':138,704,751,980,982,985,1041,1043,1055 'npx':708,1046 'null':272,375,377,379,381,383,385,387,1150 'object.defineproperty':257 'on-first-retri':732 'onchang':271 'one':1288,1298,1325 'overrid':405,406 'page':761,770,776,777,1328 'page.evaluate':783 'page.getbytext':796 'page.goto':781 'page.reload':793 'pass':1135,1375 'path':1092 'pattern':6,86,98,114,1127,1360,1365 'per':403,1284 'per-test':402,1283 'pile':1229 'playwright':30,131,194,700,709,1047,1090,1094,1321 'playwright-report':1089,1093 'playwright.config.ts':711 'playwright.dev':132 'playwright/test':707,717,772 'plugin':168 'pointer':1350 'polyfil':222,246,1275 'possibl':650 'pre':914 'pre-se':913 'present':489 'process.env':725 'process.env.ci':758 'prod':995 'product':1113,1140,1248 'project':19,573,736 'promis':478 'provid':85 'pull':957 'purpos':41 'push':956 'queri':265,270 'reach':227 'react':3,9,16,22,46,92,95,106,125,162,169,1353 'react-rout':94 'react.reactnode':391 'read':75 'readfilesync':578,618,688 'real':68,1132,1144 'realhit':638,649 'realhits.join':655 'recip':43 'record':236 'red':515,549,558 'region':336,1007,1010,1070,1073 'removeeventlisten':243,275 'removemessagelisten':324 'render':102,428,442,445,463,482,514,529,1242,1295 'repeat':1282 'report':1091,1095 'request':958 'resolv':439,467,479,481,495,1240,1292 'resolvelogin':470,480,497 'respons':252 'retri':735 'return':329,332,335,361,364,367,370,373 'reuseexistingserv':757 'rotat':1114 'router':17,96 'rule':543 'run':191,570,752,962,981,984,986,1021,1042,1045,1054,1056,1169,1219 'runs-on':961,1020 'screen':446 'screen.findbytestid':504 'screen.findbytext':430,534 'screen.querybytestid':492 'sdk':282,1277 'second':891 'secret':1217 'secrets.test':1001,1008,1015,1064,1071,1078 'seed':915 'send':244,805,866 'separ':192,1234,1333 'setappid':360 'setauthkey':366 'setregion':331,363 'setup':25,135 'setupfil':175 'share':1111 'show':415 'skill':60,78,116,541 'skill-cometchat-react-testing' 'skip':179,1158,1237,1342 'smoke':763,1330 'sourc':575,592,1314 'source-cometchat' 'specif':39,74,101,112,407,1358 'src':599,674 'startswith':644 'state':1162 'step':967,1028 'still':1380 'strategi':58 'string':237,266,779 'style':186,554 'subscribepresenceforallus':328,369 'test':4,5,23,42,69,88,113,126,143,147,151,170,183,199,212,225,250,287,397,404,436,449,563,568,764,767,788,802,908,917,938,954,987,990,1057,1100,1107,1134,1152,1161,1165,1199,1204,1227,1285,1289,1299,1309,1317,1338,1347,1359,1367,1374 'testdir':721 'testing-librari':142,146,150,198,211,448 'testing-library.com':129 'testing-library.com/docs/react-testing-library/intro':128 'text/role/test-id':1191 'three':50,55 'throw':1258 'throwaway':1207 'time':1263 'timeout':799,886,892 'tobe':697 'tobeinthedocu':539 'tobevis':798,885 'tohavelength':657 'tohavestyl':556 'topic-agent-skills' 'topic-ai-agent' 'topic-chat' 'topic-claude-code' 'topic-cometchat' 'topic-cursor' 'topic-messaging' 'topic-nextjs' 'topic-react' 'topic-react-native' 'topic-ui-kit' 'trace':731 'troubleshoot':1372 'true':174,261,309,317,349 'truth':121 'ts':156,196,286,399,409,576,600,663,675,712,765 'tsx':443,512,601,676 'two':760,803,1327 'two-pag':759,1326 'type':769,856 'ubuntu':965,1024 'ubuntu-latest':964,1023 'ui':10,47,253,507,517,1186,1302 'uid':296,299,498,501,778,784,789,790,791,833,840,851,877,921,926 'uikitsettingsbuild':358 'unauthor':427 'unit':52,960,1027,1334 'unknown':238,472 'upgrad':1188 'url':728,754 'us':337,338 'use':251,723,739,745,928,968,971,1029,1032,1084,1097,1213,1336 'user':471,804,909,918,935 'usual':900 'utf8':620,690 'v4':970,973,1031,1034,1086 'v6':12 'valu':262 'var':630,1215 'variabl':906 'verif':1265 'version':977,1038 'vi':203,290 'vi.fn':263,274,276,278,307,311,315,319,323,325,347,351,355 'vi.mock':303,343 'vi.mocked':421,474,522 'via':897,940 'visibl':508,547,1303 'vite':14,997,1005,1011,1060,1068,1074 'vitejs/plugin-react':164 'vitest':21,122,134,141,207,292,988 'vitest.config.ts':155,1267 'vitest.dev':124 'vitest.setup.ts':195,1271 'vitest/config':160 'void':473 'webserv':749 'websocket':221,231,239,898 'weight':1261 'welcom':797 'window':258 'wire':1154 'with-dep':1049 'work':1139 'worth':1259 'writabl':260 'write':61 'yaml':952 'yet':490","prices":[{"id":"ded19ba6-e2f7-44df-a0a4-1b69a7887854","listingId":"7b46ccc9-0f44-4637-b277-ac8ff1fda70a","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"cometchat","category":"cometchat-skills","install_from":"skills.sh"},"createdAt":"2026-05-18T07:04:29.966Z"}],"sources":[{"listingId":"7b46ccc9-0f44-4637-b277-ac8ff1fda70a","source":"github","sourceId":"cometchat/cometchat-skills/cometchat-react-testing","sourceUrl":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-react-testing","isPrimary":false,"firstSeenAt":"2026-05-18T07:04:29.966Z","lastSeenAt":"2026-05-18T19:04:56.193Z"}],"details":{"listingId":"7b46ccc9-0f44-4637-b277-ac8ff1fda70a","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"cometchat","slug":"cometchat-react-testing","github":{"repo":"cometchat/cometchat-skills","stars":27,"topics":["agent-skills","ai-agent","chat","claude-code","cometchat","cursor","messaging","nextjs","react","react-native","ui-kit"],"license":null,"html_url":"https://github.com/cometchat/cometchat-skills","pushed_at":"2026-05-18T05:04:24Z","description":"Add CometChat chat to any React, Next.js, React Native, Angular, Android, iOS, or Flutter project through your AI coding agent. Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and 50+ more agents.","skill_md_sha":"ee8981aba139cb6b1e8263ab497534c3ed39ddf1","skill_md_path":"skills/cometchat-react-testing/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/cometchat/cometchat-skills/tree/main/skills/cometchat-react-testing"},"layout":"multi","source":"github","category":"cometchat-skills","frontmatter":{"name":"cometchat-react-testing","license":"MIT","description":"Testing patterns for CometChat React UI Kit v6 in Vite / Next.js / React Router / Astro projects. Covers Vitest + React Testing Library setup, mocking @cometchat/chat-sdk-javascript and @cometchat/chat-uikit-react, Playwright e2e for full chat flows, the chat-specific assertions (init resolves before render, error UI visible, no Auth Key in test files, css-variables.css imported once), and CI configuration. Sister skill of cometchat-react-calls/references/testing-calls-on-web.md.","compatibility":"React >= 18, Vitest >= 1, Vite >= 5, @testing-library/react >= 14, Playwright >= 1.40; @cometchat/chat-uikit-react ^6.x"},"skills_sh_url":"https://skills.sh/cometchat/cometchat-skills/cometchat-react-testing"},"updatedAt":"2026-05-18T19:04:56.193Z"}}