不使用Enzyme测试React组件内部函数的问题求助

核心原因 #

你的测试代码中定义的mockHandleButtonClickFn和DefaultButton组件内部的handleButtonClick函数没有任何关联，组件无法感知到这个外部mock函数，因此点击按钮时不会触发它。

解决方案 #

方案一：通过Props传递回调（推荐，符合React测试库理念） #

修改组件，让它支持接收外部onClick回调，这样测试时可以传入mock函数：

组件文件修改

import React from 'react';

interface Props {
  btnText: string;
  onClick?: () => void; // 添加可选的点击回调Props
}

function DefaultButton({btnText, onClick}: Props): JSX.Element {
  function handleButtonClick() {
    console.log('Default Button Clicked');
    onClick?.(); // 触发外部传入的回调
  }
  return <button onClick={handleButtonClick}>{btnText}</button>;
}

export default DefaultButton;

测试文件修改

移除多余的TestContainer，直接渲染组件并传入mock函数：

import React from 'react';
import {render, screen} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import DefaultButton from './DefaultButton';

const btnText = 'Click Me';
const mockHandleButtonClickFn = jest.fn();

describe('DefaultButton', () => {
  it('matches snapshot', () => {
    const {container} = render(<DefaultButton btnText={btnText} />);
    expect(container).toMatchSnapshot();
  });

  it('click invokes the onClick callback', async () => {
    render(<DefaultButton btnText={btnText} onClick={mockHandleButtonClickFn} />);
    const btn = screen.getByText(btnText);
    await userEvent.click(btn); // userEvent.click是异步操作，需加await
    expect(mockHandleButtonClickFn).toHaveBeenCalledTimes(1);
  });
});

方案二：Mock console.log（无需修改组件） #

如果无法修改组件，可以通过监听console.log来验证点击行为，因为组件内部点击后会打印日志：

import React from 'react';
import {render, screen} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import DefaultButton from './DefaultButton';

const btnText = 'Click Me';

describe('DefaultButton', () => {
  it('matches snapshot', () => {
    const {container} = render(<DefaultButton btnText={btnText} />);
    expect(container).toMatchSnapshot();
  });

  it('click logs "Default Button Clicked"', async () => {
    // 监听console.log并mock实现
    const consoleSpy = jest.spyOn(console, 'log').mockImplementation(() => {});
    
    render(<DefaultButton btnText={btnText} />);
    const btn = screen.getByText(btnText);
    await userEvent.click(btn);
    
    expect(consoleSpy).toHaveBeenCalledWith('Default Button Clicked');
    consoleSpy.mockRestore(); // 恢复原console.log
  });
});

注意事项 #

• userEvent.click是异步函数，必须使用await等待操作完成，否则断言可能在点击事件触发前执行。
• 方案一更符合React组件的可复用性设计，同时也让测试更贴近用户实际使用场景（测试组件对外暴露的接口）。

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