tengo el siguiente contexto
Home.tsx
export const ThemeContext = React.createContext(null) const Home = () => { const { width } = Dimensions.get("window") const [theme, setTheme] = React.useState({ active: 0, heightOfScrollView: 0, profileWidth: width * 0.2, scrolledByTouchingProfile: false }) const horizontalScrollRef = React.useRef<ScrollView>() const verticalScrollRef = React.useRef<ScrollView>() return ( <> <SafeAreaView style={styles.safeAreaContainer} /> <Header title="Contacts" /> <ThemeContext.Provider value={{ theme, setTheme }}>En el componente A, tengo un botón que cambia en el contexto
const onProfileTouched = (index: number) => { setTheme({ ...theme, active: index }); };Esto lleva a que una imagen esté activa.
const ImageCircle = ({ active, uri }: Props) => { return ( <View style={ active ? { ...styles.parentView, ...styles.active } : { ...styles.parentView } }> <Image source={uri} width={30} height={30} /> </View> ); };Ahora, quiero escribir un caso de prueba (no he escrito un caso de prueba antes) que confirme que el estado realmente cambió o quizás se agregó un borde activo a la imagen.
Agregué un testId a mi botón que usé para activar un evento
it('changes active on profile clicked', () => { const { getByTestId } = render(<Home />); fireEvent.press(getByTestId('HScroll3.button')); });Ahora, no estoy seguro de cómo tomar el valor del contexto o cambiar el estilo para poder confirmar que, de hecho, el componente para el que se presiona el botón está activo.
Estoy usando import {render, fireEvent} from '@testing-library/react-native' pero estoy abierto a cambios.
Con testing-library, desea verificar la salida visual, no el estado interno. De esta manera, sus pruebas son mucho más valiosas, porque al usuario final no le importa si está usando contexto, estado o cualquier otra cosa, le importa si el botón tiene el estado "activo". Entonces, si en algún momento decide cambiar de opinión y refactorizar la tematización por completo, su prueba aún le brindará valor y confianza.
Sugeriría instalar @testing-library/jest-native , solo tiene que agregar este setupFilesAfterEnv": ["@testing-library/jest-native/extend-expect"] a su configuración de Jest o importar ese archivo extend-expect en su archivo de configuración de prueba.
Una vez que lo haya configurado, estará listo para comenzar.
No sé qué hay en tu estilo styles.active , pero supongamos que es, por ejemplo, { borderColor: '#00ffff' } . Agregue un accesorio testID al componente View en ImageCircle , por ejemplo, testID="imageCircleView" . Luego, para probar si todo funciona como esperas, solo tienes que agregar esto a tu prueba:
expect(getByTestId('imageCircleView')).toHaveStyle({ borderColor: '#00ffff' });Y eso es.