Integration testing specification

Code quality assurance is an indispensable aspect of frontend development, and integration testing, as one of the key methodologies, effectively validates the correctness of multiple modules working together. Standardized integration testing practices can significantly reduce issues during the integration phase and improve overall delivery efficiency.

Core Objectives of Integration Testing

Integration testing primarily verifies whether interactions between modules meet expectations, focusing on interface contracts, data flow, and state management. Unlike unit testing, integration testing requires constructing an environment close to real-world operation. Common testing scenarios include:

1. Verification of API calls and mock data consistency
2. Correctness of cross-component state sharing
3. Parameter passing during route navigation
4. Side-effect checks after third-party library integration

A typical failure case is when individually tested components encounter style conflicts or event bubbling issues after being combined. For example:

// Bad example: Ignoring style pollution in the integration environment
it('Button click should trigger submission', () => {
  const wrapper = mount(<SubmitButton />)
  wrapper.find('button').simulate('click')
  expect(mockSubmit).toHaveBeenCalled() // May fail due to global style overrides
})

Test Environment Setup Standards

Test Framework Selection

Recommended layered testing toolchain:

• Test runner: Jest or Vitest
• Component rendering: React Testing Library / Vue Test Utils
• Network requests: MSW (Mock Service Worker)
• Browser environment: JSDOM or Happy DOM

Configuration example:

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

Mock Data Management

Establish unified mock rules:

1. API response data structure strictly matches Swagger documentation
2. 100% coverage of error status codes
3. Tiered delay settings (normal/slow/timeout)

// 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: 'Test User'
      })
    )
  })
]

Test Case Design Principles

Interface Contract Testing

Validate agreements between components and external services:

describe('User Module Integration', () => {
  beforeAll(() => server.use(...userHandlers))

  it('Should handle 401 unauthorized status correctly', async () => {
    server.use(
      rest.get('/api/profile', (req, res, ctx) => {
        return res(ctx.status(401))
      })
    )
    
    const { findByText } = render(<UserPanel />)
    expect(await findByText('Please log in again')).toBeInTheDocument()
  })
})

Cross-Component State Testing

Use real stores for integration:

// Testing Redux-Component integration
const wrapWithStore = (comp) => (
  <Provider store={createStore(rootReducer)}>
    {comp}
  </Provider>
)

test('Cart total should update when adding items', () => {
  const { getByTestId } = render(wrapWithStore(<CartIndicator />))
  fireEvent.click(getByTestId('add-item'))
  expect(getByTestId('cart-count')).toHaveTextContent('1')
})

Solutions for Common Issues

Asynchronous Operation Timing

Avoid fixed wait times:

// Anti-pattern
await new Promise(r => setTimeout(r, 1000))

// Correct approach
await waitFor(() => {
  expect(screen.getByRole('alert')).toBeInTheDocument()
})

Third-Party Library Compatibility

Testing strategies for specific libraries:

// Testing react-i18next integration
const TestWrapper = ({ children }) => (
  <I18nextProvider i18n={i18nForTests}>
    {children}
  </I18nextProvider>
)

test('Should display translated text', () => {
  render(<Greeting />, { wrapper: TestWrapper })
  expect(screen.getByText('hello_message')).toBeInTheDocument()
})

Test Optimization in CI/CD

Parallel Execution Strategy

Rational test suite segmentation:

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

Retry Mechanism for Failures

Fault tolerance for flaky tests:

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

Test Coverage Analysis

Key metrics dimensions:

1. Interface parameter combination coverage
2. State transition path coverage
3. Error boundary handling coverage

Generate differential reports:

# Generate LCOV report with diff comparison
jest --coverage --changedSince=main

Performance and Security Testing Integration

Loading Performance Assertions

test('First-screen load should be under 2s', async () => {
  const { page } = await renderWithPerf(<Dashboard />)
  const metrics = await page.metrics()
  expect(metrics.FCP).toBeLessThan(2000)
})

XSS Protection Verification

it('Should filter script injections', 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()
  })
})

Test Data Factory Pattern

Build reusable test data generators:

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

// Usage in tests
const adminUser = createUser({ role: 'admin' })

Visual Regression Testing

UI comparison with Storybook:

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

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