setup react tests

package.json

@@ -19,9 +19,9 @@
     "format:fix": "prettier --write \"./**/*.{ts,js,jsx,mjs,cjs,md,mdx,tsx}\"",
     "link:cli": "cd packages/create-rainbowkit && pnpm link --global",
     "test": "pnpm test:unit",
-    "test:unit": "vitest",
-    "test:update": "vitest --update",
-    "test:watch": "vitest --watch",
+    "test:unit": "pnpm --filter @rainbow-me/rainbowkit test",
+    "test:update": "pnpm --filter @rainbow-me/rainbowkit test:update",
+    "test:watch": "pnpm --filter @rainbow-me/rainbowkit test:watch",
     "test:cli": "pnpm --filter @rainbow-me/create-rainbowkit test:build",
     "test:cli:dev": "pnpm --filter @rainbow-me/create-rainbowkit test:dev",
     "test:cli:clean": "rm -rf ./packages/create-rainbowkit/generated-test-app",
@@ -76,7 +76,6 @@
     "react-dom": "^18.1.0",
     "recursive-readdir-files": "^2.0.7",
     "typescript": "^4.9.4",
-    "vitest": "^0.5.0",
     "wagmi": "^0.12.0"
   },
   "pnpm": {

packages/rainbowkit/package.json

@@ -25,6 +25,9 @@
     "build": "node build.js",
     "build:watch": "node build.js --watch",
     "dev": "pnpm build:watch & pnpm typegen:watch",
+    "test": "vitest",
+    "test:update": "vitest --update",
+    "test:watch": "vitest --watch",
     "prepare": "MINIFY_CSS=true pnpm build",
     "prebuild": "pnpm typegen",
     "typecheck": "pnpm tsc --noEmit",
@@ -51,14 +54,23 @@
     "@ethersproject/abstract-provider": "^5.5.1",
     "@ethersproject/providers": "^5.5.1",
     "@types/qrcode": "^1.4.2",
-    "@vanilla-extract/private": "^1.0.3",
+    "@testing-library/dom": "^9.2.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/testing-library__jest-dom": "^5.14.5",
     "@vanilla-extract/css-utils": "0.1.2",
+    "@vanilla-extract/private": "^1.0.3",
     "autoprefixer": "^10.4.0",
     "ethers": "^5.0.0",
     "nock": "^13.2.4",
     "postcss": "^8.4.4",
     "react": "^18.1.0",
-    "vitest": "^0.5.0"
+    "vitest": "^0.30.1",
+    "@vanilla-extract/vite-plugin": "^3.8.0",
+    "@wagmi/connectors": "^0.3.13",
+    "@wagmi/core": "^0.10.0",
+    "jsdom": "^21.1.1"
   },
   "dependencies": {
     "@vanilla-extract/css": "1.9.1",

packages/rainbowkit/test/setup.ts

@@ -0,0 +1,9 @@
+import '@testing-library/jest-dom';
+import matchers from '@testing-library/jest-dom/matchers';
+import { cleanup } from '@testing-library/react';
+
+expect.extend(matchers);
+
+afterEach(() => {
+  cleanup();
+});

packages/rainbowkit/test/utils.tsx

@@ -0,0 +1,65 @@
+import { render } from '@testing-library/react';
+import { MockProviderOptions } from '@wagmi/connectors/mock';
+import { Wallet } from 'ethers';
+import React, { ReactElement } from 'react';
+import { Chain, configureChains, createClient, WagmiConfig } from 'wagmi';
+import { arbitrum, mainnet, optimism, polygon } from 'wagmi/chains';
+import { MockConnector } from 'wagmi/connectors/mock';
+import { publicProvider } from 'wagmi/providers/public';
+import {
+  RainbowKitProvider,
+  RainbowKitProviderProps,
+} from '../src/components/RainbowKitProvider/RainbowKitProvider';
+
+const defaultSigner = new Wallet(
+  '0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80' // first anvil pk
+);
+
+const defaultSupportedChains = [mainnet, arbitrum, polygon, optimism];
+
+export const renderWithProvider = (
+  component: ReactElement,
+  {
+    connectorOptions,
+    rainbowKit = { chains: defaultSupportedChains },
+    supportedChains = defaultSupportedChains,
+  }: {
+    supportedChains?: Chain[];
+    rainbowKit?: Omit<RainbowKitProviderProps, 'children' | 'chains'> & {
+      chains?: Chain[];
+    };
+    connectorOptions?: Partial<MockProviderOptions>;
+  } = {} as any
+) => {
+  const { chains, provider } = configureChains(supportedChains, [
+    publicProvider(), // anvil?
+  ]);
+  const wagmiClient = createClient({
+    autoConnect: true,
+    connectors: [
+      new MockConnector({
+        chains,
+        options: {
+          chainId: mainnet.id,
+          flags: { isAuthorized: true },
+          signer: defaultSigner,
+          ...connectorOptions,
+        },
+      }),
+    ],
+    provider,
+  });
+
+  const rainbowKitProps = {
+    ...rainbowKit,
+    chains: rainbowKit.chains || defaultSupportedChains,
+  };
+
+  return render(component, {
+    wrapper: ({ children }) => (
+      <WagmiConfig client={wagmiClient}>
+        <RainbowKitProvider {...rainbowKitProps} children={children} />
+      </WagmiConfig>
+    ),
+  });
+};

packages/rainbowkit/vitest.config.ts

@@ -0,0 +1,12 @@
+import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  plugins: [vanillaExtractPlugin() as any], // plugin type is broken, not sure, think it's mismatching vite/vitest versions
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: './test/setup.ts',
+    watch: false,
+  },
+});