Saltar al contenido
Consejos

Cómo probar los componentes de reacción en TypeScript

Para esta guía, probaremos un componente básico que tiene un estado interno y utiliza ganchos de Reacción para mostrar cómo escribiría un conjunto de pruebas.

Crear src/LoginForm.tsx que contiene lo siguiente:

Cómo probar los componentes de reacción en TypeScript
Cómo probar los componentes de reacción en TypeScript
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677importReactfrom "reaccion";exporttinterfaceProps{ shouldRemember:boolean;onCambio de nombre de usuario: (nombredeusuario:cadena)=[]void;onCambiarContraseña:(password:string)=[]void;onRecordarCambiar:(remember:boolean)=[];void;onEnviar:(nombredeusuario:cadena, contraseña:cadena)=[];void;}functionLoginForm(props:Props){const[nombredeusuario, establecerNombredeusuario]=Reaccionar. useState("");const[password, setPassword]=React.useState("");const[remember, setRemember]=React.useState(props.shouldRemember);const handleUsernameChange =(e:React.ChangeEvent<HTMLInputElement>) = > {const{ value }= e. target;setUsername(valor); props.onUsernameChange(valor);}; const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {const{ value }= e.target;setPassword(valor); props. onPasswordChange(value);}; const handleRememberChange = (e: React.ChangeEvent<HTMLInputElement>) => {const{ checked }= e.target;setRemember(checked); props.onRememberChange(checked);}; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); props. onSubmit(nombre de usuario, contraseña);}; return ( <formdata-testonSubmit={handleSubmit};<labelhtmlFor="nombre de usuario"};Nombre de usuario:</label><inputdata-testtype="text "name="nombre de usuario "value={nombre de usuario}onChange={handleUsernameChange}/><labelhtmlFor="contraseña"}: </labelgdomgdomgdomgdom=;inputdata-testtype="password "name="password "value={password}onChange={handlePasswordChange}/>labelgdomgdom=;inputdata-testname="remember "type="checkbox "checked={remember}onChange={handleRememberChange}/> Remember me? www. www. www. www. www. www. www. www. www. www. www. www. www. www. www. www. www. www. www. ww. www. www. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww. ww.
tsx


Este es un simple formulario de acceso que contiene un nombre de usuario, una contraseña y una casilla de verificación. Utiliza el gancho useState para mantener el estado interno, así como un shouldRemember prop para establecer el estado por defecto de la casilla de verificación.



Crear un nuevo archivo de pruebas, src/__tests__/LoginForm.test.tsx:



12345678910importarReacción de "reaccionar"; importar{ renderizar, dispararEvento, esperarElemento}de"@biblioteca de pruebas/reacción"; importarFormulario de Registro, {Propósitos}de".. /LoginForm";describe("<LoginForm />",()= "debería mostrar un formulario de acceso en blanco, con remember me checked by default",async()=);});
tsx

Este es el esqueleto de nuestra sala de pruebas. Empezamos importando las utilidades necesarias de @testing-library/react:
  • 
renderizar ayuda a renderizar los componentes y devuelve los métodos de ayuda.
  • 
fireEvent es para simular eventos en elementos DOM.
  • 
waitForElement es útil cuando se espera a que ocurran cambios en la UI.

Hemos definido una prueba pero no tiene aplicación. Para ejecutar el conjunto de pruebas, inicie el corredor de pruebas:
1npm ejecutar test:watch

Esto observará los cambios a medida que implementemos las pruebas. Como no hay afirmaciones, la primera prueba pasa:

Recuerda, queremos probar un comportamiento importante, así que la primera prueba asegurará que estamos rindiendo el nombre de usuario, la contraseña, y la casilla "recuérdame" para un formulario en blanco.

Un consejo útil es encapsular el renderizado del componente que está probando usando una función de ayuda al renderizado para que pueda manejar la anulación de los accesorios y hacer que sus pruebas sean más mantenibles:
123456789101112131415161718functionrenderLoginForm(props:Parcial<Props > = {}) {const defaultProps: Props={onPasswordChange(){reurn;},onRememberChange(){reurn;},onUsernameChange(){return;},onSubmit(){return;}, shouldRemember:true};returnrender(<LoginForm{. ..defaultProps}{...props}/{...props};);}
tsx

Aquí, estamos aprovechando TypeScript para asegurarnos de que nuestros accesorios se aplican de forma consistente al componente LoginForm. Empezamos definiendo algunos accesorios "por defecto" y luego esparciendo los accesorios adicionales pasados a la función como anulaciones. Los puntales de anulación se escriben como Parciales ya que son opcionales.

Si la interfaz de Props cambia, TypeScript arrojará un error de compilación y el ayudante de pruebas deberá ser actualizado, asegurando que nuestras pruebas se mantengan actualizadas.

La Biblioteca de Pruebas de Reacción ofrece una forma rápida de encontrar elementos usando ayudantes.

Utilizaremos findByTestId para encontrar elementos por su valor de atributo data-testid. También puedes usar getByTestId que es la versión de sincronización. Le hemos dado al elemento un valor de ID de prueba de login-form que podemos consultar.

La biblioteca de pruebas provee de más coincidencias Jest a través de @testing-library/jest-dom. En nuestro ejemplo, estamos usando un marcado de forma semántica usando los atributos de nombre de elemento y de entrada para que podamos usar el comparador toHaveFormValues para afirmar más fácilmente si los valores de forma son los que esperamos:
1234567891011test("debería mostrar un formulario de inicio de sesión en blanco, con remember me checked by default",async()= &gt {const{ findByTestId }=renderLoginForm();const loginForm =awaitfindByTestId("login-form");expect(loginForm).toHaveFormValues({ username:"", password:"", remember:true});});
tsx

La prueba aún pasa en la salida de la Jest: