这类业务逻辑繁重、模块耦合度高、前后端交付节奏常不一致的场景下，一套稳定、高效的开发与测试流程是多么关键。供应链系统往往涉及订单、仓储、物流、商品等多个领域模块，其接口数据结构复杂、状态流转多变。如果前端开发、测试、部署都强依赖于后端服务的实时可用性与数据完备性，项目进度将变得极其脆弱。

 技术不再是“锦上添花”的玩具，而是保障开发自主权、提升软件质量的“雪中炭”。然而，仅仅在本地开发时使用Mock是远远不够的。要让Mock的价值最大化，就必须将其无缝地、自动化地融入到整个软件交付生命周期中——即

CI/CD（持续集成/持续部署）和自动化测试流程

 技术栈，详细阐述如何为供应链系统设计并实现这样一套 Mock 集成方案，确保从代码提交到最终上线的每一个环节，都拥有可预期、可重复的接口行为。

“工欲善其事，必先利其器”。在集成到自动化流程前，我们首先需要选择一个强大、灵活且适合我们技术栈的Mock方案。

1.1 方案对比与敲定：Mock Service Worker (MSW)

目前主流的前端Mock方案有多个，如

是核心诉求，因此我们选择MSW。

npm install msw --save-dev
# 如果使用npm

接下来，我们为供应链系统定义Mock。假设我们有

// mocks/handlers.js
import { http, graphql, HttpResponse } from 'msw';
import { mockOrderList, mockStockInfo } from './data/supply-chain-data'; // 模拟数据

export const handlers = [
  // 1. 模拟 REST API: 查询订单列表
  http.get('/api/supply-chain/orders', ({ request }) => {
    const url = new URL(request.url);
    const page = Number(url.searchParams.get('page')) || 1;
    const status = url.searchParams.get('status'); // 如 ‘shipped’ (已发货)

    // 根据查询参数过滤模拟数据
    let filteredOrders = [...mockOrderList];
    if (status) {
      filteredOrders = filteredOrders.filter(order => order.status === status);
    }
    // 简单分页逻辑
    const pageSize = 10;
    const start = (page - 1) * pageSize;
    const pagedOrders = filteredOrders.slice(start, start + pageSize);

    return HttpResponse.json({
      code: 0,
      message: 'success',
      data: {
        list: pagedOrders,
        total: filteredOrders.length,
        page,
        pageSize
      }
    });
  }),

  // 2. 模拟 REST API: 根据SKU查询库存
  http.post('/api/supply-chain/stock/check', async ({ request }) => {
    const { skuIds } = await request.json(); // 解析请求体
    const result = skuIds.map(skuId => {
      const stock = mockStockInfo.find(s => s.skuId === skuId);
      return {
        skuId,
        availableQuantity: stock?.availableQuantity || 0,
        warehouse: stock?.warehouse || '未知仓库'
      };
    });

    // 模拟网络延迟
    // await delay(200);

    return HttpResponse.json({
      code: 0,
      message: 'success',
      data: result
    });
  }),

  // 3. 可以继续添加更多模拟接口，如 GraphQL
  // graphql.query('GetOrderDetail', ({ variables }) => { ... }),
];

我们需要在开发（浏览器）和Node（测试/构建）环境中分别启动MSW。

// mocks/browser.js (用于开发环境)
import { setupWorker } from 'msw/browser';
import { handlers } from './handlers';

export const worker = setupWorker(...handlers);

// mocks/server.js (用于Node环境：测试、CI/CD构建)
import { setupServer } from 'msw/node';
import { handlers } from './handlers';

export const server = setupServer(...handlers);

或应用入口文件，在开发环境下启用MSW：

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

// 仅在开发环境且开启了MOCK功能时，启动浏览器端Mock Service Worker
if (process.env.NODE_ENV === 'development' && process.env.REACT_APP_MOCK === 'true') {
  const { worker } = require('../mocks/browser');
  worker.start({
    onUnhandledRequest: 'bypass', // 对于未定义的请求，直接放行到网络
  }).then(() => {
    // 成功启动Worker后再渲染应用
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<App />);
  });
} else {
  // 生产或非Mock模式直接渲染
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<App />);
}

此时，我们本地的供应链系统前端已经能够完全脱离后端独立运行了。让我们通过一张图看看Mock数据是如何流动的：

图1: Mock Service Worker 请求拦截与数据流向图

二、 集成到开发、构建与自动化测试环境 

实现本地Mock只是第一步。我们的目标是让同一套Mock定义，在不同阶段都能发挥作用。

（在Create-React-App中已内置）和自定义环境变量文件来控制Mock行为。

# .env.development
REACT_APP_MOCK=true
REACT_APP_API_BASE_URL=/api

# .env.test
REACT_APP_MOCK=true
REACT_APP_API_BASE_URL=http://test-api.example.com/api

# .env.production
REACT_APP_MOCK=false
REACT_APP_API_BASE_URL=http://api.example.com/api

)和测试环境，请求被MSW拦截；在生产环境，请求发向真实API。

2.2 集成到单元测试与集成测试 (Jest/Vitest)

这是保证前端逻辑可靠性的核心。我们需要在测试用例运行前启动MSW Server，并在之后清理。

首先，创建一个测试用的Setup文件：

// jest.setup.js 或 vitest.setup.js
import '@testing-library/jest-dom';
import { server } from './mocks/server';

// 在所有测试用例之前，启动 Mock Server
beforeAll(() => server.listen({ onUnhandledRequest: 'error' })); // 测试中未处理的请求应报错

// 在每个测试用例之后，重置 Handler
afterEach(() => server.resetHandlers());

// 所有测试用例之后，关闭 Mock Server
afterAll(() => server.close());

module.exports = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  // ... 其他配置
};

现在，我们可以在测试中放心地编写涉及API调用的用例了：

// OrderList.test.jsx
import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { http, HttpResponse } from 'msw';
import { server } from '../../mocks/server';
import OrderList from './OrderList';
import { mockOrderList } from '../../mocks/data/supply-chain-data';

describe('OrderList Component', () => {
  test('加载并显示订单列表', async () => {
    render(<OrderList />);
    // 初始应显示加载中...
    expect(screen.getByText(/加载中.../i)).toBeInTheDocument();

    // 等待异步请求完成并断言列表项
    await waitFor(() => {
      mockOrderList.slice(0, 10).forEach(order => {
        expect(screen.getByText(order.orderNo)).toBeInTheDocument();
      });
    });
  });

  test('处理查询已发货订单', async () => {
    const shippedOrders = mockOrderList.filter(o => o.status === 'shipped');
    // 可以动态覆盖默认的handler，为特定测试用例定制响应
    server.use(
      http.get('/api/supply-chain/orders', ({ request }) => {
        const url = new URL(request.url);
        if (url.searchParams.get('status') === 'shipped') {
          return HttpResponse.json({
            code: 0,
            data: { list: shippedOrders, total: shippedOrders.length }
          });
        }
      })
    );

    render(<OrderList />);
    const user = userEvent.setup();
    await user.selectOptions(screen.getByLabelText(/订单状态/i), 'shipped');
    await user.click(screen.getByRole('button', { name: /查询/i }));

    await waitFor(() => {
      shippedOrders.forEach(order => {
        expect(screen.getByText(order.orderNo)).toBeInTheDocument();
      });
    });
  });

  test('优雅处理API错误', async () => {
    // 模拟服务器500错误
    server.use(
      http.get('/api/supply-chain/orders', () => {
        return new HttpResponse(null, { status: 500 });
      })
    );

    render(<OrderList />);
    await waitFor(() => {
      expect(screen.getByText(/网络开小差了，请稍后重试/i)).toBeInTheDocument();
    });
  });
});

让我们通过流程图来理解测试中的Mock工作流：

图2: 在 Jest/Vitest 测试中集成 MSW 的工作流程图

2.3 集成到端到端（E2E）测试 (Cypress/Playwright)

E2E测试模拟真实用户操作，同样需要稳定的后端。我们可以在Cypress中启动MSW。

// cypress/support/e2e.js
import { worker } from '../../mocks/browser';

// 在测试运行前启动 Mock Service Worker
before(() => {
  worker.start({ onUnhandledRequest: 'bypass' });
  // 将 worker 实例挂载到 window，便于测试中动态控制
  Cypress.on('window:before:load', (win) => {
    win.msw = { worker };
  });
});

// 每个测试后重置 Handler
afterEach(() => {
  worker.resetHandlers();
});

在测试用例中，我们甚至可以通过

// cypress/e2e/order-flow.cy.js
describe('供应链订单流程', () => {
  it('创建订单并检查库存成功', () => {
    // 访问页面
    cy.visit('/order/create');
    // ... 执行一系列UI操作
    // 动态Mock库存充足的响应
    cy.window().then((win) => {
      win.msw.worker.use(
        http.post('/api/supply-chain/stock/check', () => {
          return HttpResponse.json({
            code: 0,
            data: [{ skuId: 'SKU123', availableQuantity: 100 }]
          });
        })
      );
    });
    // 点击提交，断言成功提示
    cy.get('button[type="submit"]').click();
    cy.contains('订单提交成功').should('be.visible');
  });
});

这是将Mock的自动化价值最大化的环节。我们需要确保在代码合并、构建、甚至部署预览环节，都能基于Mock运行自动化测试和构建验证。

3.1 CI Pipeline 配置 (以 GitHub Actions 为例)

每次推送代码，都必须在与生产环境尽可能一致但又完全可控（Mock）的环境下，运行所有测试并完成构建。

# .github/workflows/ci.yml
name: CI Pipeline

on: [push, pull_request]

jobs:
  test-and-build:
    runs-on: ubuntu-latest
    env:
      # 设置测试环境变量，启用Mock
      REACT_APP_MOCK: true
      REACT_APP_API_BASE_URL: /api
      CI: true # Jest等工具在CI模式下有优化

    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'

      - name: Install Dependencies
        run: npm ci # 使用ci命令确保依赖锁定

      - name: Run Lint
        run: npm run lint

      - name: Run Unit & Integration Tests (with MSW)
        run: npm test -- --coverage --watchAll=false
        # `--watchAll=false` 是CI模式关键参数

      - name: Run E2E Tests (with MSW)
        uses: cypress-io/github-action@v5
        with:
          start: npm start # 启动一个本地开发服务器（已启用Mock）
          wait-on: 'http://localhost:3000'
          command: npm run e2e:ci # 运行无头模式的E2E测试

      - name: Build for Production
        run: npm run build
        env:
          # 构建时关闭Mock，指向一个占位符或空URL
          # 因为构建产物是静态文件，Mock（Service Worker）无法在纯静态托管中运行
          REACT_APP_MOCK: false
          REACT_APP_API_BASE_URL: ${{ secrets.PROD_API_BASE_URL }}

      - name: Upload Build Artifact
        uses: actions/upload-artifact@v3
        with:
          name: build
          path: build/

图3: 集成 Mock 的 CI/CD 流水线流程图

3.2 基于Mock的自动化部署预览 (Preview Deployment)

在Pull Request流程中，我们可以利用Vercel, Netlify等平台的“预览部署”功能。我们需要确保预览环境也能在

的情况下正常工作。一种实践是：

通过以上步骤，我们成功地将Mock深度集成到了React 19 + Webpack 5技术栈的供应链系统开发全流程中。让我们回顾一下整体架构与协作关系：

图4: Mock 在完整开发与交付流程中的集成架构图

最终，将Mock集成到CI/CD和自动化测试，绝非仅仅引入一个工具，而是建立起一种

的前端开发与质量保障文化。它让前端团队在面对复杂的供应链业务逻辑和后端依赖时，能拥有更强的自主性、更快的交付速度和更高的交付质量，是现代化前端工程化实践中不可或缺的一环。

在供应链系统这类业务逻辑繁重、模块耦合度高、前后端交付节奏常不一致的场景下，一套稳定、高效的开发与测试流程是多么关键。供应链系统往往涉及订单、仓储、物流、商品等多个领域模块，其接口数据结构复杂、状态流转多变。如果前端开发、测试、部署都强依赖于后端服务的实时可用性与数据完备性，项目进度将变得极其脆弱。

构建供应链Mock能力体系 | 将Mock集成到CI/CD和自动化测试流程

前端开发

前端

测试

架构设计

本文详细介绍基于React19+Webpack5技术栈的供应链系统Mock集成方案，采用MockServiceWorker实现无侵入式接口模拟，涵盖开发、测试、CI/CD全流程。通过环境变量控制Mock行为，确保单元测试、E2E测试稳定运行，提升开发效率与交付质量。特别针对供应链系统复杂业务场景，提供完整的技术实现方案和CI/CD集成范例。

数据管理

集成测试

单元测试

数据结构

网络延迟

数据流

服务器

GraphQL

DevOps

JSON

4核4G3M云服务器 新用户低至38元/年！

2026新春采购季

coding

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

本文详细介绍基于React19+Webpack5技术栈的供应链系统Mock集成方案，采用MockServiceWorker实现无侵入式接口模拟，涵盖开发、测试、CI/CD全流程。通过环境变量控制Mock行为，确保单元测试、E2E测试稳定运行，提升开发效率与交付质量。特别针对供应链系统复杂业务场景，提供完整的技术实现方案...

构建供应链Mock能力体系 | 将Mock集成到CI/CD和自动化测试流程

构建供应链Mock能力体系 | 将Mock集成到CI/CD和自动化测试流程

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐