問題記錄

背景：通過 Jest 和 React Testing Library 對 React Native 做自動化測試
問題： 代碼中出現 AppState 的使用

import { AppState } from 'react-native';

AppState.removeEventListener('change', handleAppStateChange);

報錯：TypeError: import_react_native.AppState.removeEventListener is not a function

jest.config.js 配置使用了 React Native 預設

module.exports = {
  preset: 'react-native',
  ...

經過排查發現是因為 React Native 提供的 jest mock 文件缺失部分方法

路徑：*/react-native/jest/setup.js

  .mock('react-native/Libraries/AppState/AppState', () => ({
    addEventListener: jest.fn(() => ({
      remove: jest.fn(),
    })),
  }))

解決方案：

項目臨時方案是將 packages/react-native/jest/setup.js 拷貝下來，增加 react-native/Libraries/AppState/AppState 模塊的 removeEventListener 和 currentState方法的mock

  .mock('react-native/Libraries/AppState/AppState', () => ({
    addEventListener: jest.fn(() => ({
      remove: jest.fn(),
    })),
    removeEventListener: jest.fn(),
    currentState: jest.fn(),
  }))

然後放在項目倉庫中在 jest.setup.js 文件頭部引入

或者在 jest.config.js 的 setupFilesAfterEnv 入口引入

最後，這個缺陷我已經給 React Native 官方倉庫提了Pull Request，已經合併主分支了

原文鏈接：https://w3cay.com/post/db420c1d.html