解析TypeError:import_react_native.AppState.removeEventListener is not a function

更新时间：2023年09月26日 10:35:50 作者：BrightChen

这篇文章主要为大家介绍了TypeError:import_react_native.AppState.removeEventListener is not a function问题解决分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

Jest React Native Mock AppState TypeError

问题记录

背景：通过 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，已经合并主分支了

以上就是解析TypeError:import_react_native.AppState.removeEventListener is not a function的详细内容，更多关于AppState TypeError解决的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

实例讲解React 组件生命周期
这篇文章主要介绍了React 组件生命周期的相关资料，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下
2020-07-07
React Router V4使用指南(精讲)
这篇文章主要介绍了React Router V4使用指南(精讲)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
React 跨端动态化核心技术实例分析
这篇文章主要为大家介绍了React 跨端动态化核心技术实例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
React tabIndex使非表单元素支持focus和blur事件
这篇文章主要为大家介绍了React使用tabIndex使非表单元素支持focus和blur事件实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
React中使用Mobx的方法
Mobx是一个前端“状态管理框架”，状态管理就是将分布在各个组件、各个模块中的状态的变化，按照一定的规则，进行统一的管理，这篇文章主要介绍了React中如何使用Mobx,需要的朋友可以参考下
2023-02-02
react-json-editor-ajrm解析错误与解决方案
由于历史原因,项目中 JSON 编辑器使用的是 react-json-editor-ajrm,近期遇到一个严重的展示错误,传入编辑器的数据与展示的不一致,这是产品和用户不可接受的,本文给大家介绍了react-json-editor-ajrm解析错误与解决方案,需要的朋友可以参考下
2024-06-06
react中value与defaultValue的区别及说明
这篇文章主要介绍了react中value与defaultValue的区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
解决React报错Property does not exist on
这篇文章主要为大家介绍了React报错Property does not exist on type 'JSX.IntrinsicElements'解决方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
react router4+redux实现路由权限控制的方法
本篇文章主要介绍了react router4+redux实现路由权限控制的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
React中事件的类型定义方式
这篇文章主要介绍了React中事件的类型定义方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12