服务端组件测试用例编写规范

React Server Component测试用例编写规范

在React Server Component实践中，编写规范的测试用例至关重要。以下是一套完整的测试规范：

基础测试结构

import { renderToString } from 'react-dom/server';
import { describe, it, expect } from 'vitest';
import MyServerComponent from './MyServerComponent';

describe('Server Component Test', () => {
  it('should render correctly', async () => {
    const result = await renderToString(<MyServerComponent />);
    expect(result).toContain('expected content');
  });
});

性能测试示例

import { performance } from 'perf_hooks';

it('should have good performance', async () => {
  const start = performance.now();
  await renderToString(<MyServerComponent />);
  const end = performance.now();
  
  expect(end - start).toBeLessThan(100); // 100ms阈值
});

数据获取测试

it('should fetch data correctly', async () => {
  const mockData = { title: 'Test', content: 'Sample' };
  const result = await renderToString(
    <MyServerComponent data={mockData} />
  );
  expect(result).toContain('Test');
});

测试规范要点

1. 使用renderToString进行服务端渲染测试
2. 设置合理的性能阈值（建议<100ms）
3. 包含数据获取和渲染结果验证
4. 通过mock数据确保测试可复现性
5. 覆盖边界条件和异常情况

通过这套规范，可以有效保障Server Component的稳定性和性能表现。