如何使用Jest/Enzyme为React的ErrorBoundary编写测试用例

我之前也遇到过一模一样的情况——ErrorBoundary在开发/生产环境里好好的，一到Jest测试就“罢工”，明明子组件抛出了错误，却还是显示正常内容。下面是我踩坑后总结的解决方案，你可以一步步排查：

1. 先确认你的ErrorBoundary实现是否正确 #

首先得确保组件本身没有问题，React 16+推荐的ErrorBoundary实现应该同时包含getDerivedStateFromError（同步更新错误状态）和componentDidCatch（记录错误日志）：

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError() {
    // 同步更新状态，确保下一次渲染直接显示错误UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 这里可以添加错误日志上报逻辑
    console.error("组件抛出错误:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <div className="error-fallback">Oops! 出问题了</div>;
    }
    return this.props.children;
  }
}

如果你只在componentDidCatch里用setState更新状态，那状态更新是异步的，测试时需要等待状态生效，这也是很多测试失败的原因。

2. 测试中必须Mock掉console.error #

React在ErrorBoundary捕获错误后，仍然会在控制台输出警告信息，Jest会把这些警告当成测试失败的依据。所以测试前一定要Mock掉console.error，避免测试被打断：

describe("ErrorBoundary 测试", () => {
  let consoleErrorMock;

  beforeEach(() => {
    // 临时替换console.error，避免React的错误警告干扰测试
    consoleErrorMock = jest.spyOn(console, "error").mockImplementation(() => {});
  });

  afterEach(() => {
    // 测试结束后恢复console.error
    consoleErrorMock.mockRestore();
  });

  // 你的测试用例写在这里
});

3. 使用mount而非shallow渲染 #

Enzyme的shallow渲染只会渲染组件本身，不会深入渲染子组件的完整生命周期，子组件抛出的错误根本不会被ErrorBoundary捕获。一定要用mount来渲染整个组件树：

import { mount } from "enzyme";
import ErrorBoundary from "./ErrorBoundary";

// 先定义一个会抛出错误的测试组件
const BrokenComponent = () => {
  throw new Error("测试错误");
  return <div>正常内容</div>;
};

it("子组件抛出错误时，应该显示错误 fallback UI", () => {
  const wrapper = mount(
    <ErrorBoundary>
      <BrokenComponent />
    </ErrorBoundary>
  );

  // 检查是否渲染了错误 fallback
  expect(wrapper.find(".error-fallback").exists()).toBe(true);
  // 检查是否不再渲染故障组件
  expect(wrapper.find(BrokenComponent).exists()).toBe(false);
});

4. 处理异步抛出的错误 #

如果你的子组件是在生命周期（比如componentDidMount）或者事件处理中抛出错误，那需要等待异步操作完成后再检查状态：
比如子组件在componentDidMount中抛出错误：

const AsyncBrokenComponent = () => {
  React.useEffect(() => {
    throw new Error("异步测试错误");
  }, []);
  return <div>正常内容</div>;
};

测试时需要用waitFor或者setTimeout等待状态更新：

it("捕获异步生命周期中的错误", async () => {
  const wrapper = mount(
    <ErrorBoundary>
      <AsyncBrokenComponent />
    </ErrorBoundary>
  );

  await waitFor(() => {
    wrapper.update();
    expect(wrapper.find(".error-fallback").exists()).toBe(true);
  });
});

如果是事件触发的错误，需要先模拟事件，再等待状态更新：

const ClickBrokenComponent = () => {
  const handleClick = () => {
    throw new Error("点击触发错误");
  };
  return <button onClick={handleClick}>点我报错</button>;
};

it("捕获点击事件中的错误", async () => {
  const wrapper = mount(
    <ErrorBoundary>
      <ClickBrokenComponent />
    </ErrorBoundary>
  );

  wrapper.find("button").simulate("click");
  
  await waitFor(() => {
    wrapper.update();
    expect(wrapper.find(".error-fallback").exists()).toBe(true);
  });
});

5. 检查Jest和Enzyme的版本兼容性 #

确保你的Enzyme适配器和React版本匹配，比如React 16对应enzyme-adapter-react-16，React 17对应@wojtekmaj/enzyme-adapter-react-17，版本不兼容也可能导致生命周期异常。

按上面的步骤调整后，你的测试应该就能正常触发ErrorBoundary的错误处理逻辑了。

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