如何为@react-native-community/netinfo的Mock扩展函数并通过TypeScript校验

问题描述 #

我已经给@react-native-community/netinfo写了Jest Mock，想给它加setConnectionState这类用来更新Mock数据的扩展函数，但导入这些新增函数时：

import NetInfo, {
  NetInfoState,
  NetInfoStateType,
  setConnectionState,
} from '@react-native-community/netinfo';

TypeScript会报错。我想让Mock支持这些原类型里没有的功能，而且只在Jest测试环境生效。

我知道可以用下面的代码过TypeScript校验，但希望这个类型扩展仅作用于Jest环境：

declare module '@react-native-community/netinfo' {
  export function resetConnectionState(): void;
  export function setConnectionState(next: NetInfoState): void;
}

解决方案 #

1. 把类型扩展放到测试专属目录 #

把上面的类型声明代码放到测试专用的类型文件里，比如在你的测试目录下创建__tests__/types/netinfo-mock.d.ts，或者直接用jest.d.ts。这样普通开发环境的TypeScript不会扫描到这个文件，只有测试环境会加载它。

2. 用tsconfig区分测试环境的类型配置 #

在项目根目录创建tsconfig.test.json，专门给Jest测试用：

{
  "extends": "./tsconfig.json",
  "include": [
    "src/**/*",
    "src/__tests__/**/*",
    "src/__tests__/types/**/*.d.ts" // 引入测试专属类型定义
  ]
}

然后在主tsconfig.json里配置jest使用这个测试专属配置：

{
  "compilerOptions": {
    // 你的原有配置
  },
  "include": [
    "src/**/*"
  ],
  "jest": {
    "globals": {
      "ts-jest": {
        "tsconfig": "tsconfig.test.json"
      }
    }
  }
}

这样普通开发环境不会加载测试专属的类型扩展，只有跑Jest时才会生效。

3. 在Mock文件里实现扩展函数 #

在你的Mock文件（src/__mocks__/@react-native-community/netinfo.ts）中，除了原有的NetInfo模拟逻辑，还要实现新增的扩展函数：

import type { NetInfoState } from '@react-native-community/netinfo';

// 存储Mock状态
let mockState: NetInfoState = {
  isConnected: true,
  // 其他默认状态字段，按需补充
};

// 原NetInfo的模拟实现
const NetInfo = {
  fetch: jest.fn(() => Promise.resolve(mockState)),
  addEventListener: jest.fn((listener) => {
    listener(mockState);
    return { remove: jest.fn() };
  }),
  // 其他需要模拟的方法，按需补充
};

// 实现新增的扩展函数
export const setConnectionState = (next: NetInfoState) => {
  mockState = next;
};

export const resetConnectionState = () => {
  mockState = {
    isConnected: true,
    // 重置为默认初始状态
  };
};

export default NetInfo;

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