es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • La función useSharedValue de react-native-reanimated no se actualiza en las pruebas de jest.

La función useSharedValue de react-native-reanimated no se actualiza en las pruebas de jest.

14 Jul, 2023 Programación

Actualmente estoy tratando de descubrir cómo probar las animaciones de reanimated 2 utilizando useSharedValue.

Lo que no tiene sentido para mí es el ejemplo proporcionado por reanimated.

https://github.com/software-mansion/react-native-reanimated/blob/master/tests/SharedValue.test.js

Si se supone que el botón incrementa su sharedValue en 1 cada vez que se presiona, ¿por qué escribirías una prueba que muestra que NO cambia?

Lo he intentado por mi cuenta y sí, el valor no se actualiza.

Quiero asegurarme de que el valor haya cambiado en mi prueba:

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”></animated.image>
)

ParallaxScrollView.test.tsx

const { getByTestId } = render();
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 }); //Recibido es 0

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Como experto en IT en react-native y react-native-reanimated, probar animaciones con useSharedValue puede ser un poco complicado. Un problema que se ha encontrado es que el ejemplo proporcionado en el repositorio oficial de react-native-reanimated en GitHub (https://github.com/software-mansion/react-native-reanimated/blob/master/__tests__/SharedValue.test.js) no parece tener sentido, ya que la prueba comprueba que un valor que se supone que aumenta cada vez que se presiona un botón (con useDerivedValue) no está cambiando realmente.

    Para probar adecuadamente una animación usando useSharedValue, es necesario llamarlo dentro del componente que utiliza la animación y luego activar el evento de animación (como desplazamiento, deslizamiento o pulsación) en el componente que se está probando. Por ejemplo, en ParallaxScrollView.tsx, scrollY se declara como useSharedValue y luego se utiliza en el estilo scrollY del componente Animated.Image. En ParallaxScrollView.test.tsx, se renderiza el componente, luego se dispara el evento scroll en el contenedor de contenido (content) y, finalmente, se puede probar la animación con toHaveAnimatedStyle.

    En este ejemplo, la afirmación es expect(headerImage).toHaveAnimatedStyle({ height: 100 }). Sin embargo, la prueba falla porque el comparador toHaveAnimatedStyle espera que la animación ya haya ocurrido. Una animación que utiliza useSharedValue parte del valor inicial asignado a useSharedValue y se actualiza con el tiempo a medida que se activa el evento de animación varias veces. Por lo tanto, para probar la animación, es necesario detener brevemente la prueba para permitir que la animación se actualice. Una forma de hacer esto es utilizando await waitFor durante un breve período de tiempo antes de hacer la afirmación. El código actualizado se vería así:

    const { getByTestId } = render(<parallaxscrollview {...defaultprops}=""></parallaxscrollview>);
const headerImage = getByTestId('header-image');
const content = getByTestId('parallax-content');

const eventData = {
  nativeEvent: {
    contentOffset: {
      y: 100,
    },
  },
};

fireEvent.scroll(content, eventData);
await waitFor(() => expect(headerImage).toHaveAnimatedStyle({ height: 100 }));

    Esta prueba ahora esperará a que se actualice la animación y luego comprobará que el estilo height del componente Animated.Image haya cambiado a 100.

Comments are closed.