JS 中 Mock 模拟速查手册怎么编写-js教程-PHP中文网

js mock速查手册：一、接口用mock.js或msw拦截请求并返回规则数据；二、用jest.mock/mockresolvedvalue替换模块，spyon控制全局方法；三、模拟延迟/错误/超时等边界；四、仅测试环境启用，按需最小化mock。

js 中 mock 模拟速查手册怎么编写

编写一份实用的 JS Mock 模拟速查手册，核心是聚焦高频场景、突出可直接复制粘贴的代码片段，并按真实开发流程组织内容——不是罗列 API，而是解决“我现在要 mock 一个接口/函数/定时器/异常，该写什么”。

一、Mock 接口请求（最常用）

多数时候 mock 是为了绕过后端联调。推荐用 Mock.js（轻量、规则灵活）或 MSW（Mock Service Worker）（更贴近真实网络层，支持浏览器和 Node）。速查重点：

Mock.js 示例（浏览器环境）：在入口 JS 中引入后，直接拦截 XHR/Fetch

Mock.mock('/api/user', { code: 200, data: { id: 1, name: '@cname', age: '@integer(18, 60)' } });

→ 后续任何对 /api/user 的 GET 请求，都会返回随机中文名和 18–60 岁的年龄。

MSW 示例（推荐新项目）：创建 mocks/handlers.js

import { rest } from 'msw';
export const handlers = [
  rest.get('/api/posts', (req, res, ctx) => {
    return res(ctx.status(200), ctx.json([{ id: 1, title: 'Hello World' }]));
  }),
];

二、Mock 全局变量或模块方法

测试中常需替换 window.localStorage、Date.now() 或第三方 SDK（如 aliyunOSS）。用 Jest 时直接 jest.mock 或 jest.spyOn：

Wjs Uploading Video

将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

下载

Mock 模块导出（自动 mock）：在测试文件顶部

jest.mock('axios', () => ({
get: jest.fn().mockResolvedValue({ data: { ok: true } }),
post: jest.fn().mockRejectedValue(new Error('Network failed')),
}));

Mock 全局方法（手动控制）：

const originalNow = Date.now;
beforeAll(() => {
Date.now = jest.fn(() => 1717027200000); // 固定时间戳
});
afterAll(() => {
Date.now = originalNow;
});

三、Mock 异步行为与边界情况

真实接口有延迟、失败、超时、节流等，mock 要覆盖这些才能测出问题：

模拟延迟 + 成功：用 ctx.delay(800)（MSW）或 setTimeout（Mock.js / 手动 fetch mock）
模拟网络错误：res.networkError()（MSW），或 mock axios 返回 Promise.reject(new Error('Network Error'))
模拟超时：fetch mock 中不 resolve；或 Jest 中用 jest.setTimeout(10000) 并主动 reject