如何使用Jest/Enzyme统计组件的渲染次数？

嘿，我来帮你搞定这个问题！你给出的代码思路已经摸到门道了，不过有几个小细节需要调整，下面我给你一步步讲明白：

首先得搞清楚：默认情况下Enzyme的mount不会自动帮我们追踪组件的render调用，所以得先手动给组件的render方法加个mock监听，同时还要保留它原本的渲染逻辑，不然组件就没法正常渲染了。

具体步骤（类组件适用） #

1. 用Jest spyOn监听组件的render方法
   假设你的组件是类组件MyComponent，在测试文件里先导入组件，然后用jest.spyOn创建一个mock函数，同时保留原方法的实现：

   import MyComponent from './MyComponent';
   
   const renderSpy = jest.spyOn(MyComponent.prototype, 'render').mockImplementation(MyComponent.prototype.render);
   

2. 挂载组件并断言渲染次数
   挂载组件之后，直接访问我们创建的mock函数来获取调用次数，还要注意你代码里的tobe是拼写错误，正确的是toBe（驼峰式）：

   const root = mount(<MyComponent />);
   expect(renderSpy.mock.calls.length).toBe(1);
   

3. 清理mock（重要）
   测试结束后记得清理mock，避免影响其他测试用例：

   renderSpy.mockRestore();
   

完整示例代码 #

import React from 'react';
import { mount } from 'enzyme';
import MyComponent from './MyComponent';

describe('MyComponent 渲染次数测试', () => {
  it('应该只渲染一次', () => {
    // 监听并mock组件的render方法，保留原实现
    const renderSpy = jest.spyOn(MyComponent.prototype, 'render').mockImplementation(MyComponent.prototype.render);
    
    const wrapper = mount(<MyComponent />);
    
    // 断言渲染次数为1
    expect(renderSpy.mock.calls.length).toBe(1);
    
    // 清理mock，防止污染其他测试
    renderSpy.mockRestore();
  });
});

注意事项 #

• 函数式组件的情况：上面的方法只适用于类组件，因为函数式组件没有prototype。如果是函数式组件，你可以考虑用Jest直接mock整个组件，或者结合React测试库来追踪渲染；如果一定要用Enzyme，也可以写个高阶组件包裹目标组件，在HOC里统计渲染次数。
• 别踩这个坑：你之前写的root.render.mock.calls是访问Enzyme wrapper自身的render方法（用来生成静态HTML的），不是组件实例的render方法，所以肯定拿不到正确的次数哦！

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