如何在每个test/it块中为组件设置不同的Mock返回值

直接在it块内调用jest.mock不会生效，因为Jest的模块缓存机制会提前处理mock。正确的做法是使用jest.doMock替代，它能绕过模块缓存，在每个测试块内动态mock组件，同时配合重新加载目标组件实现需求。

方案一：动态Mock+模块重置 #

• 用jest.doMock替代jest.mock，在每个测试块内定义不同的mock实现
• 每次mock后重新加载被测试组件，避免缓存旧的mock
• 测试结束后用jest.resetModules()清除模块缓存，确保测试间互不影响

describe('目标组件测试', () => {
  afterEach(() => {
    jest.resetModules();
  });

  it('should render component', () => {
    jest.doMock("../MyComponent", () => {
      return () =>
        <div>
          My mocked component
        </div>
    });
    
    // 重新加载被测试组件
    const TestedComponent = require('../TestedComponent').default;
    // 编写渲染、断言逻辑...
  });

  it('should render component with input', () => {
    jest.doMock("../MyComponent", () => {
      return () => 
        <div>
          Now my component has an input
          <input type="text" />
        </div>
    });
    
    const TestedComponent = require('../TestedComponent').default;
    // 编写渲染、断言逻辑...
  });
});

方案二：可控Mock工厂 #

如果不想频繁重新加载模块，可以定义一个可控制的mock工厂，通过暴露的方法切换不同的mock内容：

// 提前定义带控制方法的mock
jest.mock("../MyComponent", () => {
  let mockContent = null;
  
  const MockComponent = () => mockContent;
  
  MockComponent.setContent = (content) => {
    mockContent = content;
  };
  
  return MockComponent;
});

describe('目标组件测试', () => {
  const MyComponent = require('../MyComponent').default;
  
  beforeEach(() => {
    // 每次测试前重置mock内容
    MyComponent.setContent(null);
  });

  it('should render component', () => {
    MyComponent.setContent(<div>My mocked component</div>);
    // 渲染测试组件并编写断言逻辑...
  });

  it('should render component with input', () => {
    MyComponent.setContent(
      <div>
        Now my component has an input
        <input type="text" />
      </div>
    );
    // 渲染测试组件并编写断言逻辑...
  });
});

这两种方案都能在同一个测试文件中实现不同测试块使用不同的组件mock，无需拆分测试文件。

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