使用 Jest 模拟时找不到模块“NativeAnimatedHelper”答案

【问题标题】：Cannot find module 'NativeAnimatedHelper' when using Jest mock使用 Jest 模拟时找不到模块“NativeAnimatedHelper”
【发布时间】：2020-02-04 01:31:01
【问题描述】：

我一直在尝试在我的新 React Native 应用程序中设置 react-navigation。虽然我的代码/屏幕正常工作，但在按照v4 docs 添加库后，Jest 给我带来了问题。

我安装了react-navigation、react-native-reanimated、react-native-gesture-handler 和react-native-screens@^1.0.0-alpha.23。然后我进入ios 文件夹并运行pod install。因为我使用的是 React Native v0.61，所以它们应该是自动链接的。

当我运行默认的 Jest 测试时，我收到如下错误：

  ✓ renders correctly (106ms)

  console.warn node_modules/react-native/Libraries/Animated/src/NativeAnimatedHelper.js:270
    Animated: `useNativeDriver` is not supported because the native animated module is missing. Falling back to JS-based animation. To resolve this, add `RCTAnimation` module to this app, or remove `useNativeDriver`. More info: https://github.com/facebook/react-native/issues/11094#issuecomment-263240420

我搜索了这个错误，大多数建议的答案都是把它放在我的测试文件中：

jest.mock('NativeAnimatedHelper');

但是，当我尝试这样做时，Jest 抱怨如下错误：

 FAIL  __tests__/App-test.tsx
  ● Test suite failed to run

    Cannot find module 'NativeAnimatedHelper' from 'App-test.tsx'

       6 | import renderer from 'react-test-renderer'
       7 |
    >  8 | jest.mock('NativeAnimatedHelper')
         | ^
       9 |
      10 | it('renders correctly', () => {
      11 |   renderer.create(<App />)

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:259:17)
      at Object.<anonymous> (__tests__/App-test.tsx:8:1)

我已经尝试了一段时间，任何帮助/建议将不胜感激！

版本：

Node: 10.16.1
npm: 6.11.3
"react": "^16.9.0",
"react-native": "0.61.1",
"react-native-gesture-handler": "^1.4.1",
"react-native-reanimated": "^1.3.0",
"react-native-screens": "^1.0.0-alpha.23",
"react-navigation": "^4.0.10",
"react-navigation-stack": "^1.9.3",

"babel-jest": "^24.1.0"
"jest": "^24.1.0"
"react-test-renderer": "^16.9.0"

笑话配置：

{
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ],
    "setupFiles": [
      "./node_modules/react-native-gesture-handler/jestSetup.js"
    ],
    "transformIgnorePatterns": [
      "node_modules/(?!((jest-)?react-native|react-navigation|@react-navigation/.*))"
    ]
  }
}

【问题讨论】：

标签： react-native jestjs react-navigation

【解决方案1】：

目前解决此问题的方法

2021 年 5 月 18 日更新

看起来NativeAnimatedHelper 的位置已经移到了更新版本的 React Native 中。

改变

jest.mock('NativeAnimatedHelper');

到

jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');

以前解决此问题的方法

改变

jest.mock('NativeAnimatedHelper');

到

jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');

【讨论】：

成功了，谢谢！你知道为什么jest.mock('NativeAnimatedHelper'); 似乎对大多数人都有效吗？为什么这里需要走长路？
@saadq 我猜它最近开始发生，也许在一些新的更新中
我没有深入研究它，但今天遇到了同样的问题，并尝试模拟完整组件的路径并且它有效
知道了。再次感谢！
@JoãoGusmão 我没有在我的 package.json 中找到 jest.mock('NativeAnimatedHelper');，那么如何将其放入“jest”字典中？

【解决方案2】：

React Native v0.64.0

src 文件夹已从 Animated

中删除

您需要从模拟路径中删除 src：

Before:
jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');

After:
jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');

【讨论】：

【解决方案3】：

RN 64 应该是jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');

【讨论】：

这对我有用。我在将 react-native 升级到 0.64 后遇到了这个问题

【解决方案4】：

我不想每次使用NativeAnimatedHelper 时都这样做，所以我将模拟添加到jestSetup.js 文件中。

// test/jestSetup.js
jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');

这个文件应该包含在jest.config.js文件中

module.exports = {
  setupFiles: [
    '<rootDir>/tests/jestSetup.js',
  ],
};

【讨论】：

【解决方案5】：

虽然接受的答案似乎对人们有用并且是推荐的方法之一，但它对我不起作用。另外，它并不理想，因为路径可能会在下一个版本中改变。

按照blog post 中提到的实现，我能够正确地模拟所有单独的 react-native 模块。

实际上，我必须通过在 test/__mocks 中添加一个 react-native.js 文件来模拟 react-native 接口，并将模拟的模块导出为：

import * as ReactNative from "react-native";

export const Image = "NativeAnimatedHelper";


export default Object.setPrototypeOf(
  {
    NativeAnimatedHelper
  },
  ReactNative
);

您可以根据需要在测试中添加任意数量的导出。

【讨论】：