如何配置MSW使未Mock的请求触发测试用例失败？

要实现遇到未Mock的请求就让测试失败，核心是在onUnhandledRequest里直接抛出错误，同时处理异步请求的测试时机问题，具体步骤如下：

1. 修改MSW的onUnhandledRequest配置 #

把原来的日志打印改成抛出错误，这样Jest会捕获到这个错误并标记测试失败：

beforeAll(() => {
    server.listen({
        onUnhandledRequest(req) {
            throw new Error(
                `未处理的${req.method}请求：${req.url.href}`
            );
        },
    });
});
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

2. 调整测试用例，等待异步请求完成 #

原来的测试用例没有等待fetch请求完成就断言，可能出现测试先通过、之后才抛出错误的情况。需要用waitFor或者findBy*系列查询来等待异步操作：

import * as React from 'react';
import { render, waitFor } from '@testing-library/react';
import ExampleComponent from './ExampleComponent';

describe('ExampleComponent', () => {
    test('should render header and handle async request', async () => {
        const { getByText } = render(<ExampleComponent />);
        
        // 断言静态内容
        expect(getByText('This is a header')).toBeInTheDocument();
        
        // 等待异步请求触发，确保onUnhandledRequest有机会执行
        await waitFor(() => {}, { timeout: 1000 });
    });
});

如果需要验证Mock请求的正确性，也可以直接在测试用例中添加对应的Mock Handler：

import * as React from 'react';
import { render, findByText } from '@testing-library/react';
import { rest } from 'msw';
import ExampleComponent from './ExampleComponent';

describe('ExampleComponent', () => {
    test('should render header and fetch mocked data', async () => {
        // 添加该请求的Mock处理
        server.use(
            rest.get('http://example.com/movies.json', (req, res, ctx) => {
                return res(ctx.json({ title: 'Mocked Movie' }));
            })
        );
        
        const { getByText } = render(<ExampleComponent />);
        expect(getByText('This is a header')).toBeInTheDocument();
        
        // 等待Child组件渲染Mock数据（假设Child会展示title）
        await findByText('Mocked Movie');
    });
});

原配置无效的原因 #

• 仅打印错误日志不会触发测试失败：Jest不会因为控制台的错误日志标记测试失败，必须主动抛出错误才能中断测试流程。
• 异步请求时机问题：测试用例在fetch请求完成前就已经执行完断言并结束，此时onUnhandledRequest的日志是在测试结束后才输出的，不会影响测试结果。通过waitFor或findBy*可以确保测试等待异步操作完成，让错误在测试过程中被捕获。

内容的提问来源于stack exchange，提问作者Jedi Schmedi