mini-starter/tests/unit/client/pages/debug.test.tsx

import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import { TestWrapper } from '~/utils/client/test-render';
import { UsersPage } from '@/client/admin/pages/Users';
import { userClient } from '@/client/api';

// Mock the API client
vi.mock('@/client/api', () => ({
  userClient: {
    $get: vi.fn(),
    $post: vi.fn(),
    ':id': {
      $put: vi.fn(),
      $delete: vi.fn()
    }
  }
}));

describe('Debug Test', () => {
  it('should mock the API client', async () => {
    // Mock the API call
    (userClient.$get as any).mockResolvedValue({
      status: 200,
      ok: true,
      json: async () => ({
        data: [
          {
            id: 1,
            username: 'testuser',
            nickname: '测试用户',
            email: 'test@example.com',
            phone: '13800138000',
            name: '测试用户',
            isDisabled: 0,
            createdAt: '2024-01-01T00:00:00.000Z',
            roles: [{ id: 1, name: 'admin' }]
          }
        ],
        pagination: {
          total: 1,
          current: 1,
          pageSize: 10
        }
      })
    });

    render(
      <TestWrapper>
        <UsersPage />
      </TestWrapper>
    );

    // Check if the mock was called
    expect(userClient.$get).toHaveBeenCalled();

    // Wait for data to load
    await screen.findByText('testuser');

    expect(screen.getByText('testuser')).toBeInTheDocument();
  });
});