如何仅为特定jest-puppeteer测试启动Express服务验证React应用

核心思路是通过Jest的多项目配置，将Node端POST测试与浏览器端React测试完全隔离，仅为React测试启动服务器。具体实现步骤如下：

1. 拆分测试文件目录 #

将现有测试按类型分类存放，方便Jest精准匹配：

• __tests__/node/：存放所有用light-my-request测试的POST接口文件（如api.post.test.js）
• __tests__/browser/：存放用jest-puppeteer测试的React应用文件（如app.render.test.js）

2. 配置根Jest文件 #

在项目根目录创建jest.config.js，通过projects字段引入两个子配置：

module.exports = {
  projects: [
    './jest.node.config.js',
    './jest.puppeteer.config.js'
  ]
};

3. 配置Node端测试（无需启动服务器） #

创建jest.node.config.js，专门适配现有POST测试：

module.exports = {
  testEnvironment: 'node',
  testMatch: ['**/__tests__/node/**/*.test.js'],
  // 保留你原有的Node测试配置（如覆盖率、模块映射等）
};

4. 配置浏览器端测试（启动服务器） #

创建jest.puppeteer.config.js，启用puppeteer并指定测试范围：

module.exports = {
  preset: 'jest-puppeteer',
  testEnvironment: 'jest-environment-puppeteer',
  testMatch: ['**/__tests__/browser/**/*.test.js'],
  setupFilesAfterEnv: ['./setup.puppeteer.js']
};

5. 编写服务器启动/关闭脚本 #

创建setup.puppeteer.js，在React测试前后手动控制服务器生命周期：

const app = require('../server');
let testServer;

// 测试前启动服务器
beforeAll(async () => {
  const TEST_PORT = 3000;
  testServer = app.listen(TEST_PORT, () => {
    console.log(`测试服务器已启动：http://localhost:${TEST_PORT}`);
  });
  // 等待服务器完全启动
  await new Promise(resolve => testServer.on('listening', resolve));
});

// 测试后关闭服务器
afterAll(async () => {
  await new Promise(resolve => testServer.close(resolve));
});

6. 编写React测试示例 #

在__tests__/browser/app.render.test.js中编写puppeteer测试：

describe('React应用渲染测试', () => {
  it('应显示首页欢迎文本', async () => {
    await page.goto('http://localhost:3000');
    const welcomeText = await page.$eval('.welcome-title', el => el.textContent);
    expect(welcomeText).toBe('欢迎使用我的应用');
  });
});

7. 保留原有server.js逻辑 #

确保你的server.js仍保留仅在非测试环境启动服务器的逻辑：

const express = require('express');
const app = express();

// 路由与业务逻辑
app.get('/', (req, res) => {
  res.sendFile('./build/index.html', { root: __dirname });
});
app.post('/api/data', (req, res) => { /* POST业务逻辑 */ });

// 仅在非测试环境启动服务器
if (process.env.NODE_ENV !== 'test') {
  const PORT = process.env.PORT || 3000;
  app.listen(PORT, () => console.log(`服务器运行在端口${PORT}`));
}

module.exports = app;

运行测试 #

• 执行所有测试：npm test
• 仅运行Node端POST测试：npm test -- --testPathPattern=node
• 仅运行React浏览器测试：npm test -- --testPathPattern=browser

内容的提问来源于stack exchange，提问作者Rob Gravelle