feat: added test workflow (#10)

Co-authored-by: Alissa Crane <[email protected]>

.github/workflows/test.yml

@@ -0,0 +1,26 @@
+name: Kit Test
+on:
+  push:
+    branches: ['main']
+  pull_request:
+    branches: ['main']
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+
+      - name: Template Install dependencies
+        run: bun install
+
+      - name: Kit Test
+        # When fails, please check your tests
+        run: bun run test:coverage

src/components/TransactionWrapper.test.tsx

@@ -0,0 +1,42 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { http, WagmiProvider, createConfig } from 'wagmi';
+import { base } from 'wagmi/chains';
+import { mock } from 'wagmi/connectors';
+import TransactionWrapper from './TransactionWrapper';
+
+const config = createConfig({
+  chains: [base],
+  connectors: [
+    mock({
+      accounts: [
+        '0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266',
+        '0x70997970c51812dc3a010c7d01b50e0d17dc79c8',
+        '0x3C44CdDdB6a900fa2b585dd299e03d12FA4293BC',
+      ],
+    }),
+  ],
+  transports: {
+    [base.id]: http(),
+  },
+});
+const queryClient = new QueryClient();
+
+const renderWithProviders = (component: JSX.Element) => {
+  return render(
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>
+        {component}
+      </QueryClientProvider>
+    </WagmiProvider>,
+  );
+};
+
+describe('TransactionWrapper', () => {
+  it('should renders', () => {
+    renderWithProviders(<TransactionWrapper address="0x" />);
+    const transaction = screen.getByText('Collect');
+    expect(transaction).toBeInTheDocument();
+  });
+});

src/components/TransactionWrapper.tsx

@@ -10,6 +10,8 @@ import type {
   TransactionError,
   TransactionResponse,
 } from '@coinbase/onchainkit/transaction';
+import type { Address, ContractFunctionParameters } from 'viem';
+import { parseEther } from 'viem';
 import {
   BASE_SEPOLIA_CHAIN_ID,
   collectionAddress,
@@ -19,9 +21,7 @@ import {
   mintReferral,
   quantity,
   tokenId,
-} from 'src/constants';
-import type { Address, ContractFunctionParameters } from 'viem';
-import { parseEther } from 'viem';
+} from '../constants';
 
 type TransactionWrapperParams = {
   address: Address;

src/components/WalletWrapper.test.tsx

@@ -1,10 +1,42 @@
-import { render } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render, screen } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
+import { http, WagmiProvider, createConfig } from 'wagmi';
+import { base } from 'wagmi/chains';
+import { mock } from 'wagmi/connectors';
 import WalletWrapper from './WalletWrapper';
 
+const config = createConfig({
+  chains: [base],
+  connectors: [
+    mock({
+      accounts: [
+        '0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266',
+        '0x70997970c51812dc3a010c7d01b50e0d17dc79c8',
+        '0x3C44CdDdB6a900fa2b585dd299e03d12FA4293BC',
+      ],
+    }),
+  ],
+  transports: {
+    [base.id]: http(),
+  },
+});
+const queryClient = new QueryClient();
+
+const renderWithProviders = (Component: React.ComponentType) => {
+  return render(
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>
+        <Component />
+      </QueryClientProvider>
+    </WagmiProvider>,
+  );
+};
+
 describe('WalletWrapper', () => {
   it('should renders', () => {
-    render(<WalletWrapper />);
-    expect(true).toBeTruthy();
+    renderWithProviders(WalletWrapper);
+    const wallet = screen.getByTestId('ockConnectWallet_Container');
+    expect(wallet).toBeInTheDocument();
   });
 });

tsconfig.json

@@ -11,7 +11,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {