react-native - Jest : How can I mock out Animated loops?

Question

我正在尝试为具有以下动画代码(在 componentDidMount 上调用)的动画组件运行快照测试:

animate() {
  Animated.loop(
    Animated.sequence([
      Animated.timing(this.state.pulseAnimation, {
        toValue: 1,
        duration: 1000,
        easing: Easing.in(Easing.ease)
      })
    ]),
    {
      iterations: this.props.totalNumPulses
    }
  ).start();
}

我试图用以下内容模拟 Animated:

  jest.mock('Animated', () => {
    return {
      loop: jest.fn(() => {
        return {
          start: jest.fn(),
          reset: jest.fn()
        };
      }),
      timing: jest.fn(() => {
        return {
          start: jest.fn(),
        };
      }),
      Value: jest.fn(() => {
        return {
          interpolate: jest.fn(),
        };
      }),
    };
  });

但是，运行测试会导致此错误:

TypeError: animation.reset is not a function

  54 |         iterations: this.props.totalNumPulses
  55 |       }
> 56 |     ).start();
  57 |   }
  58 | 

我已经将重置模拟放在了不同的地方，并检查了 React Native 中“循环”方法的源代码，但没有成功模拟它。有没有人成功地做到过这一点？

Answer 1

您示例中的问题是您正在完全替换 Animated使用一个对象，而不仅仅是替换您需要测试的方法。

在下面的例子中，我模拟了 parallel().start(callback)以便它立即调用回调。

// Tests/__mocks__/react-native.js

export const Animated = {
  ...RN.Animated,
  parallel: () => ({
    // immediately invoke callback
    start: (cb: () => void) => cb()
  })
};

这让我可以跳过动画并更好地测试我的 start打回来。您可以对 Animated 的任何属性或子属性使用类似的方法。 !