React Native跨平台导入Intercom遇类型丢失问题求解决方案

1. 统一类型与平台入口结构 #

先抽离原生Intercom的类型，让Web/Jest端的Mock实现复用该类型，避免类型丢失：

• 创建utilities/Intercom/types.ts：

import type Intercom from '@intercom/intercom-react-native';

export type IntercomType = typeof Intercom;

• 保留iOS/Android端的原生导入：
  utilities/Intercom/index.ios.ts 和 utilities/Intercom/index.android.ts：

export { default } from '@intercom/intercom-react-native';

2. Web端Mock实现（带类型支持） #

不再导出空函数，而是导出一个符合原生类型的Mock对象，确保TypeScript识别且调用不报错：

utilities/Intercom/index.web.ts：

import type { IntercomType } from './types';

// 实现所有你用到的Intercom方法和常量，空执行即可
const MockIntercom: IntercomType = {
  logout: () => {},
  loginUser: () => {},
  displayMessenger: () => {},
  hideMessenger: () => {},
  UNREAD_CHANGE_NOTIFICATION: 'intercom-unread-change',
  // 按需添加其他用到的API或常量
};

export default MockIntercom;

3. Jest环境的Mock处理 #

针对Jest中出现的Cannot read property 'UNREAD_CHANGE_NOTIFICATION' of undefined错误，通过模块Mock解决：

• 在项目根目录创建__mocks__/@intercom/intercom-react-native.ts：

import type { IntercomType } from '../utilities/Intercom/types';

// 用jest.fn()实现方法，方便测试时校验调用
const MockIntercom: IntercomType = {
  logout: jest.fn(),
  loginUser: jest.fn(),
  displayMessenger: jest.fn(),
  UNREAD_CHANGE_NOTIFICATION: 'intercom-unread-change',
  // 按需添加其他API
};

export default MockIntercom;

• 修改jest.config.js，让Jest优先使用Mock模块：

module.exports = {
  // 其他已有配置
  moduleNameMapper: {
    '@intercom/intercom-react-native': '<rootDir>/__mocks__/@intercom/intercom-react-native.ts',
  },
};

4. 使用方式（无TS错误） #

现在在业务代码中直接导入即可，无需@ts-ignore，且保留完整类型提示：

import Intercom from '~/utilities/Intercom';

// 正常调用，有TS类型提示
Intercom.logout();

核心优势 #

• 完全保留原生Intercom的TypeScript类型，调用时自动补全、类型校验
• Web/Jest端的Mock实现符合类型定义，避免属性不存在的运行时错误
• Jest中可通过jest.fn()的断言方法，测试Intercom API的调用情况

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