diff --git a/apps/web/app/[locale]/(dashboard)/dashboard/__tests__/subscription.spec.tsx b/apps/web/app/[locale]/(dashboard)/dashboard/__tests__/subscription.spec.tsx
index 2d922ca..318105d 100644
--- a/apps/web/app/[locale]/(dashboard)/dashboard/__tests__/subscription.spec.tsx
+++ b/apps/web/app/[locale]/(dashboard)/dashboard/__tests__/subscription.spec.tsx
@@ -32,6 +32,30 @@ const mockBilling = {
   payments: [],
 };
 
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: string) => key,
+  useLocale: () => 'vi',
+  NextIntlClientProvider: ({ children }: { children: React.ReactNode }) => children,
+}));
+
+vi.mock('@/i18n/navigation', () => ({
+  Link: ({ children, href, ...props }: { children: React.ReactNode; href: string; [key: string]: unknown }) => (
+    <a href={href} {...props}>{children}</a>
+  ),
+  useRouter: () => ({ push: vi.fn(), replace: vi.fn() }),
+  usePathname: () => '/dashboard/subscription',
+  redirect: vi.fn(),
+}));
+
+vi.mock('lucide-react', () => ({
+  AlertCircle: () => <span data-testid="icon-alert-circle" />,
+  Check: () => <span data-testid="icon-check" />,
+  CreditCard: () => <span data-testid="icon-credit-card" />,
+  Loader2: () => <span data-testid="icon-loader2" />,
+  Smartphone: () => <span data-testid="icon-smartphone" />,
+  Wallet: () => <span data-testid="icon-wallet" />,
+}));
+
 vi.mock('@/lib/hooks/use-subscription', () => ({
   usePlans: vi.fn(() => ({ data: mockPlans, isLoading: false })),
   useBillingHistory: vi.fn(() => ({ data: mockBilling, isLoading: false })),
@@ -43,9 +67,19 @@ vi.mock('@/lib/subscription-api', () => ({
   subscriptionApi: {
     createSubscription: vi.fn(),
     upgradeSubscription: vi.fn(),
+    createCheckout: vi.fn(),
   },
 }));
 
+vi.mock('@/lib/payment-api', () => ({
+  createPayment: vi.fn(),
+  getPaymentMethods: vi.fn(() => []),
+}));
+
+vi.mock('@/lib/auth-store', () => ({
+  useAuthStore: vi.fn(() => ({ user: null, token: null })),
+}));
+
 vi.mock('@tanstack/react-query', async (importOriginal) => {
   const actual = (await importOriginal()) as Record<string, unknown>;
   return {
diff --git a/apps/web/app/[locale]/(public)/__tests__/pricing.spec.tsx b/apps/web/app/[locale]/(public)/__tests__/pricing.spec.tsx
index f6ffd77..30c0abd 100644
--- a/apps/web/app/[locale]/(public)/__tests__/pricing.spec.tsx
+++ b/apps/web/app/[locale]/(public)/__tests__/pricing.spec.tsx
@@ -43,10 +43,15 @@ vi.mock('@/i18n/navigation', () => ({
 }));
 
 vi.mock('lucide-react', () => ({
+  AlertCircle: () => <span data-testid="icon-alert-circle" />,
   Check: () => <span data-testid="icon-check">✓</span>,
+  CreditCard: () => <span data-testid="icon-credit-card" />,
   Crown: () => <span data-testid="icon-crown" />,
+  Loader2: () => <span data-testid="icon-loader2" />,
   Rocket: () => <span data-testid="icon-rocket" />,
   Shield: () => <span data-testid="icon-shield" />,
+  Smartphone: () => <span data-testid="icon-smartphone" />,
+  Wallet: () => <span data-testid="icon-wallet" />,
   X: () => <span data-testid="icon-x">✗</span>,
   Zap: () => <span data-testid="icon-zap" />,
 }));
@@ -78,9 +83,21 @@ const mockPlans = [
 
 vi.mock('@/lib/hooks/use-subscription', () => ({
   usePlans: vi.fn(() => ({ data: mockPlans, isLoading: false, error: null })),
+  useBillingHistory: vi.fn(() => ({ data: [], isLoading: false, error: null })),
 }));
 
-vi.mock('@/lib/subscription-api', () => ({}));
+vi.mock('@/lib/subscription-api', () => ({
+  subscriptionApi: { createCheckout: vi.fn() },
+}));
+
+vi.mock('@/lib/payment-api', () => ({
+  createPayment: vi.fn(),
+  getPaymentMethods: vi.fn(() => []),
+}));
+
+vi.mock('@/lib/auth-store', () => ({
+  useAuthStore: vi.fn(() => ({ user: null, token: null })),
+}));
 
 import PricingPage from '../pricing/page';
 
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
index 14d2bcf..c37324c 100644
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -12,6 +12,7 @@
         "name": "next"
       }
     ],
+    "types": ["vitest/globals"],
     "paths": {
       "@/*": ["./*"]
     },