SolidJS 如何进行单元测试和集成测试？有哪些测试工具推荐？ - 面试题

SolidJS 提供了强大的测试工具和方法来测试组件和响应式逻辑：

测试工具：

javascript
import { render, screen, fireEvent, waitFor } from '@solidjs/testing-library';
import { describe, it, expect } from 'vitest';

describe('Counter Component', () => {
  it('renders initial count', () => {
    render(() => <Counter />);
    expect(screen.getByText('Count: 0')).toBeInTheDocument();
  });

  it('increments count when button clicked', async () => {
    render(() => <Counter />);
    const button = screen.getByText('+');
    fireEvent.click(button);
    await waitFor(() => {
      expect(screen.getByText('Count: 1')).toBeInTheDocument();
    });
  });
});

测试响应式逻辑：

javascript
import { createSignal, createEffect } from 'solid-js';
import { createRoot } from 'solid-js';

describe('Reactive Logic', () => {
  it('tracks signal changes', () => {
    createRoot((dispose) => {
      const [count, setCount] = createSignal(0);
      let effectCallCount = 0;
      
      createEffect(() => {
        effectCallCount++;
        count();
      });
      
      expect(effectCallCount).toBe(1);
      setCount(1);
      expect(effectCallCount).toBe(2);
      
      dispose();
    });
  });
});

测试异步操作：

javascript
import { createResource } from 'solid-js';

describe('Async Operations', () => {
  it('handles loading state', async () => {
    const fetchMock = vi.fn(() => 
      new Promise(resolve => setTimeout(() => resolve({ data: 'test' }), 100))
    );
    
    const [data] = createResource(fetchMock);
    
    expect(data.loading).toBe(true);
    await waitFor(() => expect(data.loading).toBe(false));
    expect(data()).toEqual({ data: 'test' });
  });
});

测试用户交互：

javascript
describe('User Interactions', () => {
  it('handles form submission', () => {
    render(() => <LoginForm />);
    
    const input = screen.getByLabelText('Email');
    const button = screen.getByText('Submit');
    
    fireEvent.input(input, { target: { value: 'test@example.com' } });
    fireEvent.click(button);
    
    expect(screen.getByText('Submitted: test@example.com')).toBeInTheDocument();
  });
});

测试路由：

javascript
import { Router } from '@solidjs/router';

describe('Routing', () => {
  it('renders correct component for route', () => {
    render(() => (
      <Router>
        <Routes>
          <Route path="/" component={Home} />
          <Route path="/about" component={About} />
        </Routes>
      </Router>
    ));
    
    expect(screen.getByText('Home Page')).toBeInTheDocument();
  });
});

最佳实践：

使用 @solidjs/testing-library 进行组件测试
使用 createRoot 包装测试以自动清理
测试用户行为而非实现细节
使用 waitFor 处理异步操作
Mock 外部依赖和 API 调用
保持测试独立和可重复