如何在被测React组件中Mock工具函数？附场景代码

我来帮你搞定这个Mock的问题！你的核心问题在于，你试图通过props传递mock函数，但你的Square组件根本不是通过props接收这些工具函数的——它是直接从utils模块导入使用的。所以得用Jest的模块Mock功能来替换这些导入的函数，具体步骤如下：

第一步：用Jest Mock工具模块 #

在你的组件测试文件顶部，添加jest.mock来mock对应的utils模块，这样组件导入的就是我们的mock函数了：

// 在测试文件最顶部
import React from 'react';
import { shallow } from 'enzyme';
import { testCommonComponentAttrs } from '../../utils/tests';
import Square from './square';
import { calculateBalance } from 'utils/math';
import { setStyle } from 'utils/modifiers';

// Mock 两个工具函数所在的模块
jest.mock('utils/math', () => ({
  calculateBalance: jest.fn()
}));

jest.mock('utils/modifiers', () => ({
  setStyle: jest.fn()
}));

const coin = { id: 'bitcoin', symbol: 'BTC', price_usd: '0', balance: '0' };

第二步：调整测试逻辑，移除无效的props传递 #

你的Square组件并没有接收setStyle和calculateBalance作为props，所以之前把它们传到testCommonComponentAttrs里是没用的，改成只传coin即可：

describe('<Square /> component', () => {
  // 每次测试前重置mock函数，避免测试间互相影响
  beforeEach(() => {
    calculateBalance.mockReset();
    setStyle.mockReset();
    // 可以给mock函数设置默认返回值，确保组件渲染正常
    setStyle.mockReturnValue({});
    calculateBalance.mockReturnValue(0);
  });

  // 只传递组件需要的coin props
  testCommonComponentAttrs(Square, { coin });

  // 额外测试：验证工具函数是否被正确调用
  it('calls setStyle with the coin id when rendering', () => {
    shallow(<Square coin={coin} />);
    expect(setStyle).toHaveBeenCalledWith(coin.id);
  });

  it('calls calculateBalance with the coin object', () => {
    shallow(<Square coin={coin} />);
    expect(calculateBalance).toHaveBeenCalledWith(coin);
  });
});

为什么之前的方式不行？ #

你的Square组件代码里是直接导入工具函数使用的：

import { calculateBalance } from 'utils/math';
import { setStyle } from 'utils/modifiers';

它并没有从props里获取这两个函数，所以你通过props传入的mock函数完全没被组件用到——组件还是在用原始的工具函数（或者未被mock的版本），这就导致了测试报错。

一些额外提示 #

• 记得在beforeEach里重置mock函数，防止不同测试用例之间的状态污染。
• 如果需要测试不同返回值的情况，可以在单个测试用例里覆盖mock的返回值，比如：

  it('displays the correct calculated balance', () => {
    calculateBalance.mockReturnValue(100);
    const wrapper = shallow(<Square coin={coin} />);
    expect(wrapper.find('.f18').text()).toContain('$100');
  });
  

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