React新手（有测试经验）：如何用Mocha+Chai+Enzyme测试ErrorBoundary？

嘿，既然你在测试领域有经验，上手React的ErrorBoundary测试其实不算难，结合Mocha+Chai+Enzyme，我给你整理了一套可行的测试思路和代码示例：

核心测试要点 #

要验证ErrorBoundary的功能，关键要覆盖两个核心场景：

• 子组件抛出错误时，ErrorBoundary能成功捕获并展示预设的错误提示
• 子组件正常运行时，ErrorBoundary不干扰组件的正常渲染流程

具体测试代码实现 #

首先假设你的ErrorBoundary基础结构是这样的（捕获错误后展示降级UI）：

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <h1>抱歉，组件出现了错误</h1>;
    }
    return this.props.children;
  }
}

针对这个组件，编写对应的测试用例：

import React from 'react';
import { mount } from 'enzyme';
import { expect } from 'chai';
import ErrorBoundary from './ErrorBoundary';
import Counter from './Counter';

describe('ErrorBoundary Component', () => {
  // 测试错误捕获场景
  it('displays error message when child component throws an error', () => {
    // 创建一个会主动抛出错误的计数器变体组件
    const FaultyCounter = () => {
      throw new Error('Test counter exception');
      return <Counter />;
    };

    // 注意：这里必须用mount而非shallow，因为ErrorBoundary需要完整渲染子组件才能捕获错误
    const wrapper = mount(
      <ErrorBoundary>
        <FaultyCounter />
      </ErrorBoundary>
    );

    // 断言错误提示已正常渲染
    expect(wrapper.find('h1').text()).to.equal('抱歉，组件出现了错误');
  });

  // 测试正常渲染场景
  it('renders child component correctly when no error occurs', () => {
    const wrapper = mount(
      <ErrorBoundary>
        <Counter />
      </ErrorBoundary>
    );

    // 断言计数器组件正常挂载
    expect(wrapper.find(Counter)).to.have.lengthOf(1);
    // 可额外断言计数器初始状态，比如显示数值0
    expect(wrapper.find('.counter-display').text()).to.equal('0');
  });
});

针对你后续思考的补充（连接组件测试） #

你提到阅读了关于连接组件的测试讨论，这里补充一点：如果你的Counter是Redux连接的组件，测试时建议优先测试未连接的纯组件，或者用Redux的Provider包裹并传入测试专用store，避免store依赖干扰ErrorBoundary的测试逻辑。示例如下：

import { Provider } from 'react-redux';
import configureTestStore from '../store/configureTestStore';

const testStore = configureTestStore();

it('handles error in connected counter component', () => {
  const FaultyConnectedCounter = () => {
    throw new Error('Connected component error');
    return <ConnectedCounter />;
  };

  const wrapper = mount(
    <Provider store={testStore}>
      <ErrorBoundary>
        <FaultyConnectedCounter />
      </ErrorBoundary>
    </Provider>
  );

  expect(wrapper.text()).to.include('抱歉，组件出现了错误');
});

另外，如果你的ErrorBoundary带有错误重置功能（比如点击按钮恢复子组件渲染），还可以新增测试用例：模拟重置操作，断言组件能正确清除错误状态并重新渲染子组件。

内容的提问来源于stack exchange，提问作者a.barbieri