dev: fix test file type errors and set dev aliases (#1720)

Co-authored-by: Adam Lessey <[email protected]>
coinbase · Dec 13, 2024 · b545b48 · b545b48
1 parent 5f670e9
commit b545b48
Show file tree

Hide file tree

Showing 67 changed files with 463 additions and 203 deletions.
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "repository": "https://github.com/coinbase/onchainkit.git",
   "license": "MIT",
   "scripts": {
-    "build": "packemon build --addEngines --addFiles --declaration && npx packemon validate --no-license --no-people --no-repo && tailwindcss -i ./src/styles/index.css -o ./src/tailwind.css --minify && tailwindcss -i ./src/styles/index-with-tailwind.css -o ./src/styles.css --minify",
+    "build": "packemon build --addEngines --addFiles --loadConfigs --declaration && npx packemon validate --no-license --no-people --no-repo && tailwindcss -i ./src/styles/index.css -o ./src/tailwind.css --minify && tailwindcss -i ./src/styles/index-with-tailwind.css -o ./src/styles.css --minify",
     "check": "biome check --write .",
     "check:unsafe": "biome check . --fix --unsafe",
     "ci:check": "biome ci --formatter-enabled=false --linter-enabled=false",
@@ -63,6 +63,7 @@
     "@vitest/coverage-v8": "^2.0.5",
     "@vitest/ui": "^2.0.5",
     "autoprefixer": "^10.4.19",
+    "babel-plugin-module-resolver": "^5.0.2",
     "concurrently": "^8.0.0",
     "graphql": "^14",
     "graphql-request": "^6.1.0",

diff --git a/packemon.config.ts b/packemon.config.ts
@@ -0,0 +1,18 @@
+const config = {
+  babelInput(config) {
+    config.plugins?.push([
+      require.resolve('babel-plugin-module-resolver'),
+      {
+        root: ['./src'],
+        alias: {
+          '@/core': './src/core',
+          '@/core-react': './src/core-react',
+          '@/ui-react': './src/ui/react',
+          '@': './src',
+        },
+      },
+    ]);
+  },
+};
+
+export default config;
diff --git a/playground/nextjs-app-router/onchainkit/package.json b/playground/nextjs-app-router/onchainkit/package.json
@@ -5,7 +5,7 @@
   "repository": "https://github.com/coinbase/onchainkit.git",
   "license": "MIT",
   "scripts": {
-    "build": "packemon build --addEngines --addFiles --declaration && npx packemon validate --no-license --no-people --no-repo && tailwindcss -i ./src/styles/index.css -o ./src/tailwind.css --minify && tailwindcss -i ./src/styles/index-with-tailwind.css -o ./src/styles.css --minify",
+    "build": "packemon build --addEngines --addFiles --loadConfigs --declaration && npx packemon validate --no-license --no-people --no-repo && tailwindcss -i ./src/styles/index.css -o ./src/tailwind.css --minify && tailwindcss -i ./src/styles/index-with-tailwind.css -o ./src/styles.css --minify",
     "check": "biome check --write .",
     "check:unsafe": "biome check . --fix --unsafe",
     "ci:check": "biome ci --formatter-enabled=false --linter-enabled=false",
@@ -63,6 +63,7 @@
     "@vitest/coverage-v8": "^2.0.5",
     "@vitest/ui": "^2.0.5",
     "autoprefixer": "^10.4.19",
+    "babel-plugin-module-resolver": "^5.0.2",
     "concurrently": "^8.0.0",
     "graphql": "^14",
     "graphql-request": "^6.1.0",
@@ -112,10 +113,10 @@
       "default": "./esm/index.js"
     },
     "./api": {
-      "types": "./esm/api/index.d.ts",
-      "module": "./esm/api/index.js",
-      "import": "./esm/api/index.js",
-      "default": "./esm/api/index.js"
+      "types": "./esm/core/api/index.d.ts",
+      "module": "./esm/core/api/index.js",
+      "import": "./esm/core/api/index.js",
+      "default": "./esm/core/api/index.js"
     },
     "./checkout": {
       "types": "./esm/checkout/index.d.ts",

diff --git a/src/checkout/utils/getCommerceContracts.test.ts b/src/checkout/utils/getCommerceContracts.test.ts
@@ -1,6 +1,6 @@
+import type { PayTransaction } from '@/core/api/types';
 import { erc20Abi } from 'viem';
 import { describe, expect, it } from 'vitest';
-import type { PayTransaction } from '../../api/types';
 import { COMMERCE_ABI, CONTRACT_METHODS } from '../constants';
 import { getCommerceContracts } from './getCommerceContracts';
 

diff --git a/src/core-react/OnchainKitProvider.test.tsx b/src/core-react/OnchainKitProvider.test.tsx
@@ -1,19 +1,20 @@
 import '@testing-library/jest-dom';
+import { setOnchainKitConfig } from '@/core/OnchainKitConfig';
+import type { AppConfig } from '@/core/types';
+import type { EASSchemaUid } from '@/identity/types';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { render, screen, waitFor } from '@testing-library/react';
 import { base } from 'viem/chains';
 import { type Mock, beforeEach, describe, expect, it, vi } from 'vitest';
 import { http, WagmiProvider, createConfig } from 'wagmi';
 import { useConfig } from 'wagmi';
 import { mock } from 'wagmi/connectors';
-import { setOnchainKitConfig } from '../core/OnchainKitConfig';
-import type { EASSchemaUid } from '../identity/types';
 import { OnchainKitProvider } from './OnchainKitProvider';
 import { useProviderDependencies } from './internal/hooks/useProviderDependencies';
 import { useOnchainKit } from './useOnchainKit';
 
 vi.mock('wagmi', async (importOriginal) => {
-  const actual = await importOriginal();
+  const actual = (await importOriginal()) as typeof import('wagmi');
   return {
     ...actual,
     useConfig: vi.fn(),
@@ -50,12 +51,12 @@ const TestComponent = () => {
   );
 };
 
-vi.mock('../core/OnchainKitConfig', () => ({
+vi.mock('@/core/OnchainKitConfig', () => ({
   setOnchainKitConfig: vi.fn(),
   ONCHAIN_KIT_CONFIG: {
     address: null,
     apiKey: null,
-    chain: base,
+    chain: { name: 'base', id: 8453 },
     rpcUrl: null,
     schemaId: null,
     projectId: null,
@@ -275,7 +276,7 @@ describe('OnchainKitProvider', () => {
   });
 
   it('should use custom wallet config when provided', async () => {
-    const customConfig = {
+    const customConfig: AppConfig = {
       wallet: {
         display: 'modal',
         termsUrl: 'https://example.com/terms',

diff --git a/src/core-react/OnchainKitProvider.tsx b/src/core-react/OnchainKitProvider.tsx
@@ -1,10 +1,11 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { createContext, useMemo } from 'react';
 import { WagmiProvider } from 'wagmi';
+
 import {
   ONCHAIN_KIT_CONFIG,
   setOnchainKitConfig,
-} from '../core/OnchainKitConfig';
+} from '@/core/OnchainKitConfig';
 import { DEFAULT_PRIVACY_URL, DEFAULT_TERMS_URL } from '../core/constants';
 import { createWagmiConfig } from '../core/createWagmiConfig';
 import type { OnchainKitContextType } from '../core/types';

diff --git a/src/core-react/internal/hooks/usePreferredColorScheme.test.ts b/src/core-react/internal/hooks/usePreferredColorScheme.test.ts
@@ -1,3 +1,4 @@
+// @ts-nocheck - more complex changes requried to fix this
 import { act, renderHook } from '@testing-library/react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { usePreferredColorScheme } from './usePreferredColorScheme';

diff --git a/src/core/utils/checkHashLength.test.ts b/src/core/utils/checkHashLength.test.ts
@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { checkHashLength } from './checkHashLength';
 
 describe('checkHashLength', () => {

diff --git a/src/core/utils/formatTokenAmount.test.ts b/src/core/utils/formatTokenAmount.test.ts
@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { formatTokenAmount } from './formatTokenAmount';
 
 describe('formatTokenAmount', () => {

diff --git a/src/core/utils/getRoundedAmount.test.ts b/src/core/utils/getRoundedAmount.test.ts
@@ -1,5 +1,5 @@
+import { describe, expect, it } from 'vitest';
 import { getRoundedAmount } from './getRoundedAmount';
-
 describe('getRoundedAmount', () => {
   it('returns a rounded number with specified decimal places', () => {
     const balance = '0.0002851826238227';

diff --git a/src/core/utils/isBase.test.ts b/src/core/utils/isBase.test.ts
@@ -1,5 +1,5 @@
+import { describe, expect, it } from 'vitest';
 import { isBase } from './isBase';
-
 const baseSepolia = { id: 84532 };
 const base = { id: 8453 };
 

diff --git a/src/core/utils/isEthereum.test.ts b/src/core/utils/isEthereum.test.ts
@@ -1,6 +1,6 @@
 import { mainnet, optimism, sepolia } from 'viem/chains';
+import { describe, expect, it } from 'vitest';
 import { isEthereum } from './isEthereum';
-
 describe('isEthereum', () => {
   it('should return true for mainnet', () => {
     expect(isEthereum({ chainId: mainnet.id })).toBeTruthy();

diff --git a/src/core/utils/isValidAmount.test.ts b/src/core/utils/isValidAmount.test.ts
@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { isValidAmount } from './isValidAmount';
 
 describe('isValidAmount', () => {

diff --git a/src/identity/components/Avatar.test.tsx b/src/identity/components/Avatar.test.tsx
@@ -50,6 +50,7 @@ describe('Avatar Component', () => {
 
   it('should console.error and return null when no address is provided', () => {
     vi.mocked(useIdentityContext).mockReturnValue({
+      // @ts-expect-error
       address: undefined,
       chain: undefined,
     });

diff --git a/src/identity/components/EthBalance.test.tsx b/src/identity/components/EthBalance.test.tsx
@@ -30,6 +30,7 @@ describe('EthBalance', () => {
   const testEthBalanceComponentAddress = '0xEthBalanceComponentAddress';
   it('should console.error and return null when no address is provided', () => {
     vi.mocked(useIdentityContext).mockReturnValue({
+      // @ts-expect-error
       address: undefined,
     });
     const consoleErrorSpy = vi

diff --git a/src/identity/components/IdentityCard.test.tsx b/src/identity/components/IdentityCard.test.tsx
@@ -1,7 +1,7 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { render, screen, waitFor } from '@testing-library/react';
 import type React from 'react';
-import { baseSepolia as sepolia } from 'viem/chains';
+import { goerli, baseSepolia as sepolia } from 'viem/chains';
 import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
 import type { Mock } from 'vitest';
 import { OnchainKitProvider } from '../../core-react/OnchainKitProvider';
@@ -92,13 +92,7 @@ describe('IdentityCard', () => {
   const renderWithProvider = (component: React.ReactNode) => {
     return render(
       <QueryClientProvider client={queryClient}>
-        <OnchainKitProvider
-          config={{
-            chains: [sepolia],
-          }}
-        >
-          {component}
-        </OnchainKitProvider>
+        <OnchainKitProvider chain={sepolia}>{component}</OnchainKitProvider>
       </QueryClientProvider>,
     );
   };
@@ -142,9 +136,7 @@ describe('IdentityCard', () => {
       error: null,
     } as ReturnType<typeof useAvatar>);
 
-    renderWithProvider(
-      <IdentityCard address={mockAddress} showAvatar={true} />,
-    );
+    renderWithProvider(<IdentityCard address={mockAddress} />);
     await waitFor(() => {
       expect(screen.getByTestId('ockAvatar_Image')).toBeInTheDocument();
     });
@@ -160,7 +152,7 @@ describe('IdentityCard', () => {
   });
 
   it('truncates address when truncate prop is true', () => {
-    renderWithProvider(<IdentityCard address={mockAddress} truncate={true} />);
+    renderWithProvider(<IdentityCard address={mockAddress} />);
     expect(screen.getByText('0x1234...7890')).toBeInTheDocument();
   });
 
@@ -171,13 +163,11 @@ describe('IdentityCard', () => {
       error: null,
     } as ReturnType<typeof useName>);
 
-    renderWithProvider(
-      <IdentityCard address={mockAddress} chain={{ id: 5, name: 'Goerli' }} />,
-    );
+    renderWithProvider(<IdentityCard address={mockAddress} chain={goerli} />);
 
     expect(useNameMock).toHaveBeenCalledWith({
       address: mockAddress,
-      chain: { id: 5, name: 'Goerli' },
+      chain: goerli,
     });
   });
 });
diff --git a/src/identity/components/IdentityProvider.test.tsx b/src/identity/components/IdentityProvider.test.tsx
@@ -39,7 +39,7 @@ describe('IdentityProvider', () => {
     });
     expect(result.current.address).toEqual(address);
     expect(result.current.schemaId).toEqual(schemaId);
-    expect(result.current.chain.id).toEqual(chain.id);
+    expect(result.current.chain?.id).toEqual(chain.id);
   });
 
   it('should return default context when no props are passed', () => {
@@ -48,7 +48,7 @@ describe('IdentityProvider', () => {
     });
     expect(result.current.address).toEqual('');
     expect(result.current.schemaId).toEqual(undefined);
-    expect(result.current.chain.id).toEqual(84532); // defaults to base
+    expect(result.current.chain?.id).toEqual(84532); // defaults to base
   });
 
   it('use onchainkit context chain if provided', () => {
@@ -65,7 +65,7 @@ describe('IdentityProvider', () => {
     });
     expect(result.current.address).toEqual('');
     expect(result.current.schemaId).toEqual(undefined);
-    expect(result.current.chain.id).toEqual(optimism.id);
+    expect(result.current.chain?.id).toEqual(optimism.id);
   });
 
   it('use identity context chain over onchainkit context if both are provided', () => {
@@ -82,6 +82,6 @@ describe('IdentityProvider', () => {
     });
     expect(result.current.address).toEqual('');
     expect(result.current.schemaId).toEqual(undefined);
-    expect(result.current.chain.id).toEqual(sepolia.id);
+    expect(result.current.chain?.id).toEqual(sepolia.id);
   });
 });
diff --git a/src/identity/components/Name.test.tsx b/src/identity/components/Name.test.tsx
@@ -39,6 +39,7 @@ describe('Name', () => {
 
   it('should console.error and return null when no address is provided', () => {
     vi.mocked(useIdentityContext).mockReturnValue({
+      // @ts-expect-error
       address: undefined,
       chain: undefined,
     });

diff --git a/src/identity/utils/getSocials.test.ts b/src/identity/utils/getSocials.test.ts
@@ -1,4 +1,6 @@
-import { base, mainnet } from 'viem/chains';
+import { http } from 'viem';
+import { createPublicClient } from 'viem';
+import { base, mainnet, sepolia } from 'viem/chains';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { getChainPublicClient } from '../../core/network/getChainPublicClient';
 import { isBase } from '../../core/utils/isBase';
@@ -10,7 +12,12 @@ vi.mock('../../core/utils/isEthereum');
 vi.mock('../../core/network/getChainPublicClient');
 
 describe('getSocials', () => {
+  const actualClient = createPublicClient({
+    chain: mainnet,
+    transport: http(),
+  });
   const mockClient = {
+    ...actualClient,
     getEnsText: vi.fn(),
   };
 
@@ -84,7 +91,7 @@ describe('getSocials', () => {
     vi.mocked(isBase).mockReturnValue(false);
     vi.mocked(isEthereum).mockReturnValue(false);
 
-    const unsupportedChain = { id: 123, name: 'Unsupported Chain' } as const;
+    const unsupportedChain = sepolia;
 
     await expect(
       getSocials({ ensName, chain: unsupportedChain }),

diff --git a/src/nft/components/NFTLifecycleProvider.test.tsx b/src/nft/components/NFTLifecycleProvider.test.tsx
@@ -2,7 +2,12 @@ import '@testing-library/jest-dom';
 import { fireEvent, render } from '@testing-library/react';
 import type { TransactionReceipt } from 'viem';
 import { describe, expect, it, vi } from 'vitest';
-import { LifecycleType } from '../types';
+import {
+  type LifecycleStatus,
+  LifecycleType,
+  MediaType,
+  type NFTError,
+} from '../types';
 import {
   NFTLifecycleProvider,
   useNFTLifecycleContext,
@@ -39,7 +44,7 @@ const TestComponent = () => {
     context.updateLifecycleStatus({
       statusName: 'mediaLoading',
       statusData: {
-        mimeType: 'image/png',
+        mediaType: MediaType.Image,
         mediaUrl: 'https://example.com/image.png',
       },
     });
@@ -75,6 +80,11 @@ const renderWithProviders = ({
   onError = vi.fn(),
   onStatus = vi.fn(),
   onSuccess = vi.fn(),
+}: {
+  Component: () => React.ReactNode;
+  onError?: (error: NFTError) => void;
+  onStatus?: (lifecycleStatus: LifecycleStatus) => void;
+  onSuccess?: (transactionReceipt?: TransactionReceipt) => void;
 }) => {
   return render(
     <NFTLifecycleProvider

diff --git a/src/nft/components/mint/NFTCreator.test.tsx b/src/nft/components/mint/NFTCreator.test.tsx
@@ -14,7 +14,9 @@ vi.mock('../NFTProvider', () => ({
 
 vi.mock('../../../identity', async () => ({
   ...(await vi.importActual('../../../identity')),
-  Identity: ({ className }) => <div className={className}>Identity</div>,
+  Identity: ({ className }: { className: string }) => (
+    <div className={className}>Identity</div>
+  ),
 }));
 
 describe('NFTCreator', () => {