如何用React Testing与Jest显式测试组件函数调用及func2触发情况

首先先修正你组件里的一个小问题：function1里的this.func2只是引用了方法，没有实际调用，得改成this.func2()才能触发调用，不然测试肯定过不了：

class A extends Component {
    function1() { 
      this.func2(); // 这里加括号完成调用
    }

    func2() {
      // returns some value
    }
    render() { 
       return (
         <div>{this.function1}</div>
       );
     }
 }

接下来针对你的需求，用React Testing Library + Jest实现测试，有两种常用方案：

方案一：直接创建组件实例测试（推荐，适合纯方法逻辑测试） #

如果只是要验证function1会调用func2，不需要渲染组件，直接创建实例就能测：

import A from './path-to-your-component';

test('function1 调用 func2', () => {
  // 创建组件实例
  const instance = new A();
  // 监视实例上的func2方法
  const func2Spy = jest.spyOn(instance, 'func2');

  // 调用function1
  instance.function1();

  // 断言func2被调用
  expect(func2Spy).toHaveBeenCalled();
});

方案二：渲染组件后获取实例调用方法（适合需要结合渲染上下文的场景） #

如果必须在组件渲染后调用方法，可以通过DOM元素获取组件实例（注意：React内部属性可能随版本变化，这个方法依赖React内部实现，不过稳定版本大多兼容）：

import { render } from '@testing-library/react';
import A from './path-to-your-component';

test('渲染后调用function1会触发func2', () => {
  // 监视组件原型上的func2，所有实例的调用都会被捕获
  const func2Spy = jest.spyOn(A.prototype, 'func2');
  // 渲染组件
  const { container } = render(<A />);

  // 从DOM元素获取组件实例
  const instance = container.firstChild._reactInternals.memoizedState.element._owner.stateNode;

  // 调用function1
  instance.function1();

  // 断言func2被调用
  expect(func2Spy).toHaveBeenCalled();
});

补充：符合RTL设计理念的测试方式 #

React Testing Library更推荐模拟用户真实操作，如果function1是通过用户交互（比如点击）触发的，优先用@testing-library/user-event模拟交互，而非直接调用方法：

import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import A from './path-to-your-component';

test('点击元素触发function1调用func2', async () => {
  const func2Spy = jest.spyOn(A.prototype, 'func2');
  const { getByText } = render(<A />);
  
  // 假设组件内有触发点击的元素，需根据实际渲染内容调整查询方式
  await userEvent.click(getByText('触发按钮'));

  expect(func2Spy).toHaveBeenCalled();
});

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