集成测试规范

代码质量保障是前端开发中不可忽视的重要环节，而集成测试作为关键手段之一，能够有效验证多个模块协同工作的正确性。规范的集成测试实践能显著降低联调阶段的问题，提升整体交付效率。

集成测试的核心目标

集成测试主要验证模块间的交互是否符合预期，重点关注接口契约、数据流和状态管理。与单元测试不同，集成测试需要构建接近真实运行的环境，常见测试场景包括：

1. API调用与Mock数据的一致性验证
2. 跨组件状态共享的正确性
3. 路由跳转的参数传递
4. 第三方库集成后的副作用检查

典型的失败案例是单独测试通过的组件在组合后出现样式冲突或事件冒泡问题。例如：

// 错误示例：未考虑集成环境的样式污染
it('按钮点击应触发提交', () => {
  const wrapper = mount(<SubmitButton />)
  wrapper.find('button').simulate('click')
  expect(mockSubmit).toHaveBeenCalled() // 可能因全局样式覆盖导致失败
})

测试环境搭建规范

测试框架选型组合

推荐采用分层测试工具链：

• 测试运行器: Jest 或 Vitest
• 组件渲染: React Testing Library / Vue Test Utils
• 网络请求: MSW(Mock Service Worker)
• 浏览器环境: JSDOM 或 Happy DOM

配置示例：

// jest.config.js
module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  }
}

模拟数据管理

建立统一的mock规则：

1. API响应数据结构与swagger文档严格一致
2. 错误状态码覆盖率达到100%
3. 延迟时间分级设置（正常/慢速/超时）

// mocks/handlers.ts
import { rest } from 'msw'

export const handlers = [
  rest.get('/api/user', (req, res, ctx) => {
    return res(
      ctx.delay(150),
      ctx.json({
        id: 'U001',
        name: '测试用户'
      })
    )
  })
]

测试用例设计原则

接口契约测试

验证组件与外部服务的约定：

describe('用户模块集成', () => {
  beforeAll(() => server.use(...userHandlers))

  it('应正确处理401未授权状态', async () => {
    server.use(
      rest.get('/api/profile', (req, res, ctx) => {
        return res(ctx.status(401))
      })
    )
    
    const { findByText } = render(<UserPanel />)
    expect(await findByText('请重新登录')).toBeInTheDocument()
  })
})

跨组件状态测试

使用真实store进行集成：

// 测试Redux与组件的集成
const wrapWithStore = (comp) => (
  <Provider store={createStore(rootReducer)}>
    {comp}
  </Provider>
)

test('购物车总数应随添加商品更新', () => {
  const { getByTestId } = render(wrapWithStore(<CartIndicator />))
  fireEvent.click(getByTestId('add-item'))
  expect(getByTestId('cart-count')).toHaveTextContent('1')
})

常见问题处理方案

异步操作时序问题

避免使用固定等待时间：

// 反模式
await new Promise(r => setTimeout(r, 1000))

// 正确做法
await waitFor(() => {
  expect(screen.getByRole('alert')).toBeInTheDocument()
})

第三方库兼容性

针对特定库的测试方案：

// 测试react-i18next集成
const TestWrapper = ({ children }) => (
  <I18nextProvider i18n={i18nForTests}>
    {children}
  </I18nextProvider>
)

test('应显示翻译文本', () => {
  render(<Greeting />, { wrapper: TestWrapper })
  expect(screen.getByText('hello_message')).toBeInTheDocument()
})

持续集成中的测试优化

并行执行策略

合理分割测试套件：

# GitHub Actions配置示例
jobs:
  test:
    strategy:
      matrix:
        test-group: [core, integration, ui]
    steps:
      - run: jest --group=${{ matrix.test-group }}

失败重试机制

针对不稳定测试的容错方案：

// jest-retry配置
jest.retryTimes(2, {
  logErrorsBeforeRetry: true,
  retryImmediately: process.env.CI ? true : false
})

测试覆盖率分析

重点关注的指标维度：

1. 接口参数组合覆盖率
2. 状态迁移路径覆盖率
3. 错误边界处理覆盖率

生成差异化报告：

# 生成LCOV报告并差分比较
jest --coverage --changedSince=main

性能与安全测试集成

加载性能断言

test('首屏加载应小于2s', async () => {
  const { page } = await renderWithPerf(<Dashboard />)
  const metrics = await page.metrics()
  expect(metrics.FCP).toBeLessThan(2000)
})

XSS防护验证

it('应过滤脚本注入', async () => {
  server.use(
    rest.get('/api/content', (req, res, ctx) => {
      return res(ctx.text('<script>alert(1)</script>'))
    })
  )
  
  const { container } = render(<ContentPreview />)
  await waitFor(() => {
    expect(container.querySelector('script')).toBeNull()
  })
})

测试数据工厂模式

构建可复用的测试数据生成器：

// factories/user.ts
export const createUser = (overrides?: Partial<User>): User => ({
  id: faker.datatype.uuid(),
  name: faker.name.fullName(),
  ...overrides
})

// 测试中使用
const adminUser = createUser({ role: 'admin' })

可视化回归测试

集成Storybook进行UI比对：

// storybook.test.js
import { imageSnapshot } from '@storybook/addon-storyshots-puppeteer'

initStoryshots({
  suite: 'Image storyshots',
  test: imageSnapshot({
    storybookUrl: 'http://localhost:6006'
  })
})