React测试：用React Testing Library正确mock嵌套导入组件的方法

具体错误点 #

• jest.mock变量提升导致的引用失效：jest.mock调用会被Babel-jest自动提升到测试文件所有顶层代码（包括import语句）之前执行。原代码中jest.mock的工厂函数引用了外部导入的MockedSearchBox，此时这个变量还处于暂时性死区、未完成初始化，jest无法解析到正确的mock组件值，最终会回退加载原始的SearchBox模块。
• jest.mock作用域不规范：将jest.mock写在describe块内部，而非测试文件顶层作用域，依然受变量提升规则限制，和外部导入的变量引用存在解析冲突。
• 类方法名拼写不匹配：原SearchBox定义的方法是全小写开头的asyncmethod，你在MockedSearchBox中写的是驼峰命名的asyncMethod，哪怕mock成功挂载，因为方法名和原组件完全对不上，根本无法覆盖原始方法，执行的依然是带setTimeout的原始逻辑。
• 非必要的继承依赖：MockedSearchBox直接继承自原始SearchBox，会把原始组件的类属性、初始化逻辑全部引入，本来要移除的定时器逻辑依然会被继承下来，达不到mock简化的目的。
• 多处代码笔误：原代码中MyComponent.tsx里的React.component首字母小写、测试代码里的expext拼写错误，都会导致运行异常。

正确实现方式 #

方案1：直接在jest.mock工厂内定义独立mock组件（最推荐） #

完全不依赖外部导入的变量，从根源上规避变量提升的问题，同时去掉不必要的继承：

// MyComponent.test.tsx
import React from 'react';
import { render } from '@testing-library/react';
import { MyComponent } from './MyComponent';

// jest.mock自动提升到文件最顶部执行，工厂内不引用任何外部未初始化变量
jest.mock('./SearchBox', () => {
  // 直接定义独立的mock组件，不继承原SearchBox
  class MockedSearchBox extends React.Component {
    // 方法名和原组件完全一致，修正大小写不匹配的问题
    public asyncmethod() {
      doSomething();
      console.log('using mocked class method');
    }
    render() {
      // 返回测试可识别的文本节点
      return <div>Search mock text</div>;
    }
  }
  // 导出结构和原SearchBox模块完全一致
  return {
    SearchBox: MockedSearchBox
  }
});

describe('My component', () => {
  test('that my component shows text', () => {
    const { getByText } = render(<MyComponent />);
    // 修正拼写错误
    expect(getByText('Search mock text')).toBeDefined();
  });
});

方案2：复用外部定义的mock组件 #

如果需要跨测试用例复用mock组件，必须遵守jest的变量命名规则：在jest.mock工厂内引用的外部变量必须以Mock开头，jest才会允许在提升后的代码中正确解析变量值：

// testUtil.tsx
import React from 'react';

// 组件名以Mock开头，满足jest的引用白名单要求
export class MockSearchBox extends React.Component {
  public asyncmethod() {
    doSomething();
    console.log('using mocked class method');
  }
  render() {
    return <div>Search mock text</div>;
  }
}

// MyComponent.test.tsx
import React from 'react';
import { render } from '@testing-library/react';
import { MyComponent } from './MyComponent';
// 导入的mock变量名以Mock开头
import { MockSearchBox } from './testUtil';

jest.mock('./SearchBox', () => {
  // 因为变量名符合规则，不会触发暂时性死区报错
  return {
    SearchBox: MockSearchBox
  }
});

// 后续测试逻辑同方案1

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