react-native-reanimated useSharedValue 在玩笑测试中不更新
react-native-reanimated useSharedValue does not update in jest tests
我目前正在尝试找出如何使用 useSharedValue 测试重新激活的 2 个动画。
对我来说 0 有意义的是 reanimated 给出的例子。
https://github.com/software-mansion/react-native-reanimated/blob/master/tests/SharedValue.test.js
如果按钮应该在您每次按下它时将其 sharedValue 递增 1。你为什么要写一个显示它不会改变的测试???
我自己试过了,是的,该值不会自行更新。
我想断言该值在我的测试中已更改:
ParallaxScrollView.tsx
const scrollY = useSharedValue(0);
const onScroll = useAnimatedScrollHandler((event) => {
scrollY.value = event.contentOffset.y;
});
return (
<Animated.Image
style={{height: scrollY}}
testID="header-image"
source={{ uri: headerImage }}
resizeMode="cover"
/>
)
ParallaxScrollView.test.tsx
const { getByTestId } = render(<ParallaxScrollView {...defaultProps} />);
const headerImage = getByTestId('header-image');
const content = getByTestId('parallax-content');
const eventData = {
nativeEvent: {
contentOffset: {
y: 100,
},
},
};
fireEvent.scroll(content, eventData);
expect(headerImage).toHaveAnimatedStyle({ height: 100 }); //Received is 0
useAnimatedScrollHandler
使用 react-native-gesture-handler
来处理事件,但目前 gesture-handler 还不支持测试中的事件,这就是我正在做的事情。看看这个 - https://github.com/software-mansion/react-native-gesture-handler/pull/1762
我认为这将很快可用。如果您想保持最新状态,请在 Reanimated Github.
中打开一个问题
我目前正在尝试找出如何使用 useSharedValue 测试重新激活的 2 个动画。
对我来说 0 有意义的是 reanimated 给出的例子。
https://github.com/software-mansion/react-native-reanimated/blob/master/tests/SharedValue.test.js
如果按钮应该在您每次按下它时将其 sharedValue 递增 1。你为什么要写一个显示它不会改变的测试???
我自己试过了,是的,该值不会自行更新。
我想断言该值在我的测试中已更改:
ParallaxScrollView.tsx
const scrollY = useSharedValue(0);
const onScroll = useAnimatedScrollHandler((event) => {
scrollY.value = event.contentOffset.y;
});
return (
<Animated.Image
style={{height: scrollY}}
testID="header-image"
source={{ uri: headerImage }}
resizeMode="cover"
/>
)
ParallaxScrollView.test.tsx
const { getByTestId } = render(<ParallaxScrollView {...defaultProps} />);
const headerImage = getByTestId('header-image');
const content = getByTestId('parallax-content');
const eventData = {
nativeEvent: {
contentOffset: {
y: 100,
},
},
};
fireEvent.scroll(content, eventData);
expect(headerImage).toHaveAnimatedStyle({ height: 100 }); //Received is 0
useAnimatedScrollHandler
使用 react-native-gesture-handler
来处理事件,但目前 gesture-handler 还不支持测试中的事件,这就是我正在做的事情。看看这个 - https://github.com/software-mansion/react-native-gesture-handler/pull/1762
我认为这将很快可用。如果您想保持最新状态,请在 Reanimated Github.