React Testing Library模拟点击事件失效：mock函数未被调用问题

问题原因 #

你测试代码里定义的const onClick = jest.fn()和组件testClick内部的onClick是完全独立的两个函数。组件渲染时使用的是自身内部声明的、会打印2333的函数，根本没用到你在测试里定义的模拟函数，所以点击按钮后，组件自身的函数正常执行（能看到console.log输出），但测试里的模拟函数不会被触发。

解决方法 #

方法一：将onClick作为props传入组件（推荐）

重构组件，让回调逻辑通过props传递，这样测试时可以直接传入模拟函数，实现可测试性：

修改testClick.js：

import React from 'react'
import { Button } from 'antd'

export default function TestClick({ onClick }) {
  return (
    <Button onClick={onClick}>testClick</Button>
  )
}

修改testClick.test.js：

import React from 'react'
import TestClick from './testClick'
import { render, fireEvent, screen } from '@testing-library/react'

describe('TestClick UI', () => {
  test('triggers onClick when button is clicked', () => {
    const mockOnClick = jest.fn()
    render(<TestClick onClick={mockOnClick} />)
    const buttonEl = screen.getByText('testClick')
    fireEvent.click(buttonEl)
    expect(mockOnClick).toHaveBeenCalled()
  })
})

方法二：验证组件内部的console.log（临时方案，不推荐）

如果暂时不想修改组件结构，可以通过监听console.log来验证点击逻辑：

修改testClick.test.js：

import React from 'react'
import TestClick from './testClick'
import { render, fireEvent, screen } from '@testing-library/react'

describe('TestClick UI', () => {
  test('triggers onClick when button is clicked', () => {
    // 监听console.log并替换为模拟实现
    const consoleSpy = jest.spyOn(console, 'log').mockImplementation()
    render(<TestClick />)
    const buttonEl = screen.getByText('testClick')
    fireEvent.click(buttonEl)
    expect(consoleSpy).toHaveBeenCalledWith('2333')
    // 恢复原始console.log
    consoleSpy.mockRestore()
  })
})

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