自动化测试实战：单元测试、集成测试到 E2E 测试的完整方案#

1
export function sum(a, b) {
2
  return a + b;
3
}
4

5
// sum.test.js
6
import { sum } from './sum';
7

8
describe('sum', () => {
9
  test('adds 1 + 2 to equal 3', () => {
10
    expect(sum(1, 2)).toBe(3);
11
  });
12

13
  test('adds negative numbers', () => {
14
    expect(sum(-1, -2)).toBe(-3);
15
  });
16
});

1
import { mount } from '@vue/test-utils';
2
import Counter from './Counter.vue';
3

4
describe('Counter', () => {
5
  test('increments count when button is clicked', async () => {
6
    const wrapper = mount(Counter);
7

8
    expect(wrapper.text()).toContain('Count: 0');
9

10
    await wrapper.find('button').trigger('click');
11

12
    expect(wrapper.text()).toContain('Count: 1');
13
  });
14

15
  test('renders props correctly', () => {
16
    const wrapper = mount(Counter, {
17
      props: {
18
        initialCount: 10
19
      }
20
    });
21

22
    expect(wrapper.text()).toContain('Count: 10');
23
  });
24
});

1
import { render, screen, fireEvent } from '@testing-library/react';
2
import Counter from './Counter';
3

4
describe('Counter', () => {
5
  test('renders counter', () => {
6
    render(<Counter />);
7
    expect(screen.getByText('Count: 0')).toBeInTheDocument();
8
  });
9

10
  test('increments on button click', () => {
11
    render(<Counter />);
12

13
    fireEvent.click(screen.getByText('Increment'));
14

15
    expect(screen.getByText('Count: 1')).toBeInTheDocument();
16
  });
17
});

1
import request from 'supertest';
2
import app from './app';
3

4
describe('API Integration', () => {
5
  test('GET /users returns list of users', async () => {
6
    const response = await request(app)
7
      .get('/users')
8
      .expect(200);
9

10
    expect(response.body).toBeInstanceOf(Array);
11
    expect(response.body[0]).toHaveProperty('id');
12
    expect(response.body[0]).toHaveProperty('name');
13
  });
14

15
  test('POST /users creates a new user', async () => {
16
    const newUser = { name: 'Alice', email: 'alice@example.com' };
17

18
    const response = await request(app)
19
      .post('/users')
20
      .send(newUser)
21
      .expect(201);
22

23
    expect(response.body.name).toBe(newUser.name);
24
    expect(response.body).toHaveProperty('id');
25
  });
26
});

1
beforeAll(async () => {
2
  await db.connect(process.env.TEST_DATABASE_URL);
3
});
4

5
afterAll(async () => {
6
  await db.close();
7
});
8

9
beforeEach(async () => {
10
  await db.clear();
11
});
12

13
describe('Database Integration', () => {
14
  test('creates and retrieves user', async () => {
15
    const user = await User.create({
16
      name: 'Test User',
17
      email: 'test@example.com'
18
    });
19

20
    const found = await User.findById(user.id);
21

22
    expect(found.name).toBe('Test User');
23
  });
24
});

1
describe('Login', () => {
2
  beforeEach(() => {
3
    cy.visit('/login');
4
  });
5

6
  it('successfully logs in with valid credentials', () => {
7
    cy.get('[data-testid="email-input"]').type('user@example.com');
8
    cy.get('[data-testid="password-input"]').type('password123');
9
    cy.get('[data-testid="login-button"]').click();
10

11
    cy.url().should('include', '/dashboard');
12
    cy.get('[data-testid="welcome-message"]').should('contain', 'Welcome');
13
  });
14

15
  it('shows error with invalid credentials', () => {
16
    cy.get('[data-testid="email-input"]').type('invalid@example.com');
17
    cy.get('[data-testid="password-input"]').type('wrongpassword');
18
    cy.get('[data-testid="login-button"]').click();
19

20
    cy.get('[data-testid="error-message"]').should('be.visible');
21
  });
22
});

1
import { test, expect } from '@playwright/test';
2

3
test.describe('Login', () => {
4
  test.beforeEach(async ({ page }) => {
5
    await page.goto('/login');
6
  });
7

8
  test('successfully logs in', async ({ page }) => {
9
    await page.fill('[data-testid="email-input"]', 'user@example.com');
10
    await page.fill('[data-testid="password-input"]', 'password123');
11
    await page.click('[data-testid="login-button"]');
12

13
    await expect(page).toHaveURL(/dashboard/);
14
    await expect(page.locator('[data-testid="welcome-message"]')).toContainText('Welcome');
15
  });
16

17
  test('visual regression test', async ({ page }) => {
18
    await page.goto('/dashboard');
19
    await expect(page).toHaveScreenshot('dashboard.png');
20
  });
21
});

1
import { faker } from '@faker-js/faker';
2

3
export function createUser(overrides = {}) {
4
  return {
5
    id: faker.string.uuid(),
6
    name: faker.person.fullName(),
7
    email: faker.internet.email(),
8
    ...overrides
9
  };
10
}
11

12
// 使用
13
test('displays user name', () => {
14
  const user = createUser({ name: 'Test User' });
15
  render(<UserCard user={user} />);
16
  expect(screen.getByText('Test User')).toBeInTheDocument();
17
});