React Native Google Mobile Ads集成React Testing Library测试报错求助

以下是几种实用的解决方案，帮你在测试环境避开原生广告库的导入问题，同时能正常测试集成组件：

1. 单测试文件Mock广告库 #

在你的组件测试文件顶部，直接Mock整个react-native-google-mobile-ads库，返回模拟的组件和常量：

jest.mock('react-native-google-mobile-ads', () => ({
  BannerAd: () => null, // 测试时渲染空组件，也可以换成带testID的View方便断言
  BannerAdSize: { BANNER: 'banner', LARGE_BANNER: 'large-banner' },
  // 如果你用到了其他模块（比如InterstitialAd），也需要在这里Mock
  InterstitialAd: jest.fn(),
}));

这样测试时导入广告库的代码会指向这个Mock，不会触发原生模块查找。

2. 组件层面条件导入/替换 #

在集成广告的业务组件里，根据环境条件选择导入真实广告组件还是测试用占位组件：

import { View } from 'react-native';

// 条件导入广告组件
let BannerAd;
if (process.env.NODE_ENV !== 'test') {
  const { BannerAd: RealBannerAd } = require('react-native-google-mobile-ads');
  BannerAd = RealBannerAd;
} else {
  // 测试环境用占位组件，可加testID方便测试断言
  BannerAd = (props) => <View testID="test-ad-banner" {...props} />;
}

// 业务组件里正常使用BannerAd
export default function HomeScreen() {
  return (
    <View>
      {/* 其他内容 */}
      <BannerAd
        unitId="your-ad-unit-id"
        size="banner"
      />
    </View>
  );
}

这种方法不用修改测试文件，组件自身会在测试环境自动切换成占位组件。

3. 全局配置Jest Mock #

如果多个测试文件都用到广告库，可以在Jest的全局配置文件（比如setupTests.js）里添加全局Mock，一劳永逸：

// setupTests.js
jest.mock('react-native-google-mobile-ads', () => {
  const { View } = require('react-native');
  return {
    BannerAd: (props) => <View testID="mock-ads-banner" {...props} />,
    BannerAdSize: {
      BANNER: 'banner',
      MEDIUM_RECTANGLE: 'medium-rectangle',
      FULL_BANNER: 'full-banner',
    },
    // 按需Mock你项目中用到的其他API
    RewardedAd: jest.fn().mockReturnValue({
      load: jest.fn(),
      show: jest.fn(),
    }),
  };
});

记得在jest.config.js里把setupFilesAfterEnv指向这个setupTests.js文件。

这些方法的核心都是用Mock替代原生广告模块，避免测试环境加载未实现的TurboModule，同时不影响业务组件的测试逻辑。

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