react-native - 开玩笑:如何模拟动画循环?
问题描述
我正在尝试为具有以下动画代码(在 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 中“循环”方法的源代码,但没有成功模拟它。有没有人成功地做到过这一点?
解决方案
您的示例中的问题是您完全替换Animated
为一个对象,而不是仅替换您需要测试的方法。
在下面的示例中,我模拟了它,parallel().start(callback)
以便它立即调用回调。
// Tests/__mocks__/react-native.js
export const Animated = {
...RN.Animated,
parallel: () => ({
// immediately invoke callback
start: (cb: () => void) => cb()
})
};
这让我可以跳过动画并更好地测试我的start
回调。Animated
您可以对!的任何属性或子属性使用类似的方法。
推荐阅读
- r - R:提取满足多个条件的 ID 数量
- c++ - 为什么不能输出动态分配的字符?
- html - 如何从 iframe 中删除滚动(尝试过“溢出:隐藏”和“滚动:否”)?
- angular - Angular 8 - ng lint:超出最大调用堆栈大小错误
- typescript - 带布尔值的可区分联合
- c# - 如何在模型 blazor asp.net c# 中自定义消息双“字段必须是数字”
- c# - 在c#中使用带有sql事务的多个线程从sql server中的单个表中读取
- javascript - 如何获得 OK 的响应状态作为测试结果?
- jvm - 堆栈上有东西时,VerifyError 清空字节码中的堆栈
- java - 如何在 Firebase 实时数据库中读取嵌套数据(哈希图)