如何使用Jest测试组件中按钮onClick调用的内部函数？

问题原因 #

你测试里定义的const Add = jest.fn()是一个本地mock函数，和组件内部的Add函数完全无关。组件点击按钮时调用的是自身内部的Add，根本不会触发你测试里的mock函数，所以会出现「期望调用次数>=1，实际为0」的报错。

方案一：测试组件的用户可见行为（推荐） #

React Testing Library的设计理念是测试用户能感知到的行为，而非内部实现。我们可以模拟真实用户操作：输入内容→点击按钮→检查列表是否新增对应项。

修改后的测试代码：

test('点击按钮后将输入内容添加到列表', () => {
  render(<App />);
  
  // 模拟用户输入内容
  const input = screen.getByTestId('inpField');
  fireEvent.change(input, { target: { value: '待添加项' } });
  
  // 模拟点击按钮
  const button = screen.getByTestId('btn');
  fireEvent.click(button);
  
  // 验证列表中是否出现输入的内容
  expect(screen.getByText('待添加项')).toBeInTheDocument();
});

方案二：提取Add函数并mock（需修改组件） #

如果你确实需要验证Add函数的调用，可以把它从组件内部提取为独立导出的函数，这样测试时可以mock它。

修改App.js：

// 提取为独立函数并导出
export function Add(list, el) {
  return [...list, el];
}

function App(){
  const[value,setValue] = useState('')
  const[list,setList] = useState([])

  return(
    <div>
      {/* 补全input标签的闭合 */}
      <input data-testid="inpField" type="text" onChange={(e)=>setValue(e.target.value)} />
      <button data-testid="btn" onClick={()=>setList(Add(list, value))}>Add</button>
      {list.map((post,index) => <li key={index}>{post}</li>)}
    </div>
  )
}

export default App;

修改App.test.js：

import App, { Add } from './App';

// mock导出的Add函数
jest.mock('./App', () => ({
  ...jest.requireActual('./App'),
  Add: jest.fn(),
}));

test('点击按钮时调用Add函数', () => {
  // 给mock函数设置返回值，避免影响组件状态更新
  Add.mockReturnValue(['待添加项']);
  
  render(<App />);
  
  const input = screen.getByTestId('inpField');
  fireEvent.change(input, { target: { value: '待添加项' } });
  
  const button = screen.getByTestId('btn');
  fireEvent.click(button);
  
  // 验证Add函数是否被正确调用
  expect(Add).toHaveBeenCalledWith([], '待添加项');
});

注意：方案一更符合测试最佳实践，因为它不依赖组件内部实现细节，即使后续重构Add函数的逻辑或命名，只要用户可见的行为不变，测试依然能通过。

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