尝试在Jest测试中呈现react-native-reanimated节点时出现"TypeError“

Question

当尝试用Jest呈现我的应用程序以进行一些集成测试时，我得到了以下错误：

    TypeError: Cannot read property 'createNode' of undefined

      at AnimatedParam.createNode [as __nativeInitialize] (node_modules/react-native-reanimated/src/core/AnimatedNode.js:126:24)
      at AnimatedParam.__nativeInitialize [as __attach] (node_modules/react-native-reanimated/src/core/AnimatedNode.js:71:10)
      at new __attach (node_modules/react-native-reanimated/src/core/AnimatedParam.js:11:10)
      at createAnimatedParam (node_modules/react-native-reanimated/src/core/AnimatedParam.js:71:10)
      at createAnimatedFunction (node_modules/react-native-reanimated/src/core/AnimatedFunction.js:38:17)
      at Object.<anonymous> (node_modules/react-native-reanimated/src/derived/interpolate.js:17:39)

它在react-native-reanimated中抱怨的代码如下所示：

  __nativeInitialize() {
    if (!this.__initialized) {
      ReanimatedModule.createNode(this.__nodeID, { ...this.__nodeConfig });
      this.__initialized = true;
    }
  }

ReanimatedModule是react-native库中NativeModule的类型别名。除此之外，我还没有找到任何有用的信息来帮助解决这个问题。

这里特别奇怪的是，我没有在我的代码库中直接使用react-native-reanimated，而且据我所知，我能找到的唯一使用它的库组件没有在被测试的组件中呈现。

我没有能够以任何合理的方式精简我的代码来重现这个问题，并且有问题的代码受到公司版权的保护，所以我不能共享存储库。我将继续尝试在一个小示例中重现错误，但我想把这个问题放在那里，以防有人对这个问题有任何经验。

Answer 1

我也遇到了这个问题。

我最终需要用下面这样的代码模拟整个重新激活的模块：

jest.mock('react-native-reanimated', () => {
  const View = require('react-native').View;

  return {
    Value: jest.fn(),
    event: jest.fn(),
    add: jest.fn(),
    eq: jest.fn(),
    set: jest.fn(),
    cond: jest.fn(),
    interpolate: jest.fn(),
    View: View,
    Extrapolate: { CLAMP: jest.fn() },
    Transition: {
      Together: 'Together',
      Out: 'Out',
      In: 'In',
    },
  };
});

我将其放在一个/spec_config/jest.js文件中，该文件在我的jest.config.js文件中使用以下行加载(以及其他一些全局模拟)：setupFilesAfterEnv: ['./spec_config/jest.js'],

对我来说似乎是一团糟，但我想这就是这个世界的现状。(h/t此GitHub问题：https://github.com/software-mansion/react-native-reanimated/issues/205)

Answer 2

如果你需要模拟react-native-reanimated，你不需要手动操作，因为他们现在在模块本身中提供了一个模拟。

简单地将下面这一行添加到jest.setup.js文件：

jest.mock('react-native-reanimated', () =>
  require('react-native-reanimated/mock')
);

这是由这个PR介绍的：https://github.com/software-mansion/react-native-reanimated/pull/276/files#diff-1377ba307a14fcbe31e128f4753b73301a43967a417c744f144f9ae5d77f67d5R7

Answer 3

问题出在react-native-reanimated的问题上。按照react-native-reanimated documentation中的步骤进行操作。现在它应该可以正常工作了。如果没有，请尝试修复react-native-gesture-handler documentation中的react-native-gesture handler。