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();
}

我试图使用以下内容模拟动画：

  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 |

我已经将重置模拟放在不同的地方并检查了＆＃39;循环中的源代码。 React Native中的方法，但没有任何运气成功嘲笑它。有没有人成功地做过这件事？

Answer 1

示例中的问题在于，您将Animated完全替换为对象，而不是仅替换需要测试的方法。

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

jest.mock('Animated', () => ({
  ...jest.requireActual('Animated'),
  parallel: () => ({
    start: (callback) => callback()
  })
}));

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

您可以在测试的顶部执行此操作，甚至可以使用doMock

在单个测试中执行此操作

Answer 2

如果您使用的是笑话，则可以在[[[False False False True True True False False False False] [False False False False False False False True False False] [False False False False False False False False False False] [False False False False False False False False False False] [False False False False False False False False False False] [False False False False False False False False False False] [False False False False False False False False False False] [False False False True True False True False False False]]]文件夹中为react-native创建一个模拟，并从所需的react native模拟特定的功能/方法，而其余的react-native保持不变。

__mocks__

Jest：我如何模拟动画循环？

2 个答案: