Jest集成配置 - 元素码农

发布时间: 2025-03-27 19:16

↑

# Jest集成配置

本文将详细介绍如何将Playwright与Jest测试框架集成，帮助你构建更强大的自动化测试方案。

## 基础配置

### 1. 安装依赖

```bash
# 安装Jest和Playwright
npm install -D jest @playwright/test jest-playwright-preset

# 安装TypeScript相关依赖
npm install -D typescript ts-jest @types/jest
```

### 2. 配置Jest

```javascript
// jest.config.js
module.exports = {
  preset: 'jest-playwright-preset',
  testMatch: ['**/__tests__/**/*.+(ts|js)', '**/?(*.)+(spec|test).+(ts|js)'],
  transform: {
    '^.+\.(ts)$': 'ts-jest',
  },
  testEnvironment: 'node',
  setupFilesAfterEnv: ['./jest.setup.js']
};
```

### 3. 设置环境

```javascript
// jest.setup.js
const { chromium } = require('@playwright/test');

beforeAll(async () => {
  global.browser = await chromium.launch();
});

afterAll(async () => {
  await global.browser.close();
});

beforeEach(async () => {
  global.context = await global.browser.newContext();
  global.page = await global.context.newPage();
});

afterEach(async () => {
  await global.context.close();
});
```

## 编写测试

### 1. 基本测试

```typescript
// login.test.ts
describe('登录功能', () => {
  test('成功登录', async () => {
    await page.goto('https://example.com/login');
    await page.fill('input[name="username"]', 'admin');
    await page.fill('input[name="password"]', '123456');
    await page.click('button[type="submit"]');
    
    await expect(page).toHaveURL('https://example.com/dashboard');
    await expect(page.locator('.welcome')).toContainText('欢迎');
  });

test('登录失败', async () => {
    await page.goto('https://example.com/login');
    await page.fill('input[name="username"]', 'wrong');
    await page.fill('input[name="password"]', 'wrong');
    await page.click('button[type="submit"]');
    
    await expect(page.locator('.error')).toBeVisible();
  });
});
```

### 2. 高级测试

```typescript
// api.test.ts
describe('API测试', () => {
  test('请求拦截', async () => {
    await page.route('**/api/data', route => {
      route.fulfill({
        status: 200,
        body: JSON.stringify({ success: true })
      });
    });

await page.goto('https://example.com');
    const response = await page.waitForResponse('**/api/data');
    expect(await response.json()).toEqual({ success: true });
  });

test('请求验证', async () => {
    const requests = [];
    page.on('request', request => requests.push(request));

await page.goto('https://example.com');
    expect(requests.some(r => r.url().includes('/api/track'))).toBeTruthy();
  });
});
```

## 测试工具

### 1. 自定义匹配器

```typescript
// jest.setup.js
expect.extend({
  async toHaveScreenshot(page) {
    const screenshot = await page.screenshot();
    expect(screenshot).toMatchImageSnapshot();
    return { pass: true };
  },

async toPassA11y(page) {
    const violations = await page.evaluate(() => {
      // 运行无障碍测试
      return axe.run();
    });
    expect(violations.length).toBe(0);
    return { pass: true };
  }
});
```

### 2. 测试助手

```typescript
// helpers.ts
export class TestHelper {
  static async login(page, username, password) {
    await page.goto('https://example.com/login');
    await page.fill('input[name="username"]', username);
    await page.fill('input[name="password"]', password);
    await page.click('button[type="submit"]');
  }

static async mockApi(page, url, response) {
    await page.route(url, route => {
      route.fulfill({
        status: 200,
        body: JSON.stringify(response)
      });
    });
  }
}
```

## 最佳实践

### 1. 测试组织

```typescript
// user.test.ts
import { TestHelper } from './helpers';

describe('用户管理', () => {
  beforeEach(async () => {
    await TestHelper.login(page, 'admin', '123456');
  });

describe('用户列表', () => {
    test('显示用户列表', async () => {
      await page.goto('/users');
      await expect(page.locator('table')).toBeVisible();
    });

test('搜索用户', async () => {
      await page.goto('/users');
      await page.fill('input[name="search"]', 'test');
      await page.click('button.search');
      await expect(page.locator('table')).toContainText('test');
    });
  });
});
```

### 2. 并行测试

```javascript
// jest.config.js
module.exports = {
  preset: 'jest-playwright-preset',
  maxWorkers: 4,
  testEnvironmentOptions: {
    'jest-playwright': {
      browsers: ['chromium', 'firefox'],
      launchOptions: {
        headless: true
      }
    }
  }
};
```

## 调试技巧

### 1. 测试调试

```typescript
// debug.test.ts
test('调试测试', async () => {
  // 启用调试模式
  await jestPlaywright.debug();

await page.goto('https://example.com');
  
  // 查看页面状态
  console.log(await page.title());
  console.log(await page.url());

// 截图调试
  await page.screenshot({ path: 'debug.png' });
});
```

### 2. 错误处理

```typescript
// error.test.ts
test('错误处理', async () => {
  try {
    await page.goto('https://example.com');
    await page.click('.non-existent');
  } catch (error) {
    console.error('测试失败:', error);
    throw error;
  }
});
```

## 常见问题

### 1. 超时处理

```javascript
// jest.config.js
module.exports = {
  preset: 'jest-playwright-preset',
  testTimeout: 30000,
  testEnvironmentOptions: {
    'jest-playwright': {
      launchOptions: {
        timeout: 30000
      }
    }
  }
};
```

### 2. 环境问题

```typescript
// environment.test.ts
test('环境检查', async () => {
  // 检查浏览器状态
  expect(global.browser).toBeDefined();
  expect(global.context).toBeDefined();
  expect(global.page).toBeDefined();

// 检查网络连接
  await page.goto('https://example.com');
  expect(await page.title()).toBeTruthy();
});
```

## 下一步

1. 学习[Mocha测试报告生成](/article/playwright/integration/mocha)
2. 了解[持续集成CI/CD配置](/article/playwright/integration/ci-cd)
3. 探索[测试用例组织结构](/article/playwright/best-practices/test-organization)

## 参考资料

- [Jest官方文档](https://jestjs.io/docs/getting-started)
- [Playwright测试API](https://playwright.dev/docs/test-api-testing)
- [Jest Playwright集成](https://github.com/playwright-community/jest-playwright)