0

estoy intentando testear un componente de mi app hecha en react-native con jest y enzyme, basicamente lo que busco testear es una validacion de un campo, el problema es que esa validacion se hace sobre una variable de React.useState, y por lo que estuve leyendo no es posible cambiar el valor de esa variable desde afuera. Como tendria que hacer para lograr testear esa funcion? Este es el componente que intento testear (reducido, solo deje el codigo pertinente):

export function RegisterScreen() {

    const [email, setEmail] = React.useState('');


    function validateEmail() {
        var re = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()\.,;\s@\"]+\.{0,1})+[^<>()\.,;:\s@\"]{2,})$/;
        return re.test(email);
    }

    return (
        <View>

            ...

            <TextWithIconComponent placeholder="Email" onChange={setEmail} />
       
             ...

        </View>
    );
}

Ese componente "TextWithIconComponent" es otro componente mio, basicamente es un TextImput con un icono a un lado, el cual al cambiar llama a setEmail. Lo que me gustaria hacer es lo siguiente:

describe('RegisterScreen', () => {

    it('should not validate email', () => {
        const component = mount(<RegisterScreen/>);
        component.setEmail("un email invalido");
        expect(component.validateEmail()).toBeFalsy();
    });
});

Existe alguna forma de lograr esto? O como deberia hacer para poder testear esa funcion? Muchas gracias.

1 respuesta 1

0

Te propongo una alternativa para que pruebes tu funcion validateEmail. Lo que quieres hacer de setear el estado desde el test no es una buena practica (creo que hay formas de hacerlo con enzyme, al menos antes de los hooks se podia, igual no te lo recomiendo), lo que quieres hacer se lo conoce testear detalles de implementacion.

Kent C Dodds, Autor de la libreria react-testing-library dice que 'Cuanto mas se parezcan tus test a la forma en la que tu software es utilizado, mas seguridad pueden darte'. Y nuestros usuarios no interactuan con nuestros setters de estados.

Podrias simular que el usuario tipeo el mail tecla por tecla y no meterte a los detalles de implementacion del componente.

Sin embargo, no es necesario hacer tan complicado tu test.

Podrias llevarte la funcion validateEmail a un modulo de utilidades (o simplemente exportarla en ese mismo archivo y tener un test unitario de la funcion.

describe('given validateEmail', () => {
  it('should return false when value is a number', () => {
  ...
  }

  it('should return true when value is a valid email', () => {
    ...
  }
}

Si luego quieres hacer test de integracion donde pruebas la funcion dentro del componente, como te digo, no intentes setear el estado de una manera distinta a la que tu usuario lo haria, simula un tipeo dentro del input (enzyme tiene la funcion simulate), te dara un test mas fiable.

react-testing-library tiene utilidades como fireEvent que te permitirian disparar un onChange con el cambio que quieras y dejar que tu componente siga su curso o userEvent que simulan un tipeo, click, y distintos comportamientos del usuario.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.