1: import {fireEvent, render, screen} from "@testing-library/react";
    2: import CreateTwitchAccount from "./CreateTwitchAccount";
   …
   28: 
   29:   it('si el usuario se repite mostrar mensaje de error', () => {
   30: 
   31:   });
   32: });

1. Usuario ingresa nombre de usuario
2. Se valida con el backend la existencia del usuario
3. En caso de existir, mostramos mensaje de error y deshabilitamos botón de guardar

   29:   it('si el usuario se repite mostrar mensaje de error', async () => {
   30:     const props = {
   31:       createAccount: jest.fn()
   32:     }
   33: 
   34:     render(
   35:       <CreateTwitchAccount {...props} />
   36:     )
   37: 
   38:     fireEvent.change(screen.getByTestId('username'), { target: { value: 'Gabriel' } })
   39: 
   40:     expect(document.body.textContent).toContain("El usuario Gabriel ya existe")
   41:   });

Ejecutemos la prueba.

Como era de esperarse nos ha arrojado un error 😣 no ha encontrado el mensaje “El usuario Gabriel ya existe”.

src/CreateTwitchAccount.test.js

…
   29:   it('si el usuario se repite mostrar mensaje de error', async () => {
   30:     const props = {
   31:       createAccount: jest.fn(),
   32:       users: jest.fn()
   33:     }
   34: 
   35:     props.users.mockRejectedValue({
   36:       errors: ["El usuario Gabriel ya existe"]
   37:     })
   38: 
   39:     render(
   40:       <CreateTwitchAccount {...props} />
   41:     )
   42: 
   43:     await act(() => {
   44:       fireEvent.change(screen.getByTestId('username'), { target: { value: 'Gabriel' } })
   45:     })
   46: 
   47:     expect(document.body.textContent).toContain("El usuario Gabriel ya existe")
   48:   });

    1: import {useState} from "react";
    2: 
    3: const CreateTwitchAccount = ({ createAccount, users }) => {
    4:   const [values, setValues] = useState({})
    5:   const [errors, setErrors] = useState([])
    6: 
    7:   function onChange({ target }) {
    8:     values[target.name] = target.value
    9:     setValues({ ...values })
   10:   }
   11: 
   12:   function handleSubmit(event) {
   13:     event.preventDefault()
   14: 
   15:     if(errors.length !== 0) {
   16:       return
   17:     }
   18: 
   19:     createAccount({ ...values })
   20:   }
   21: 
   22:   async function handleUsernameChange(event) {
   23:     const { username } = event.target
   24:     try {
   25:       await users(username)
   26:       setErrors([])
   27:     } catch(e) {
   28:       setErrors(e.errors)
   29:     } finally {
   30:       onChange(event)
   31:     }
   32:   }
   33: 
   34:   return(
   35:     <form onSubmit={handleSubmit}>
   36:       <ul>
   37:         {errors && errors.map((error, index) => <li key={index}>{error}</li>)}
   38:       </ul>
   39:       <input type="text" name="username"
   40:              data-testid="username" placeholder="Usuario" onChange={handleUsernameChange} />
   41:       <input type="text" name="password"
   42:              data-testid="password" placeholder="Password" onChange={onChange} />
   43:       <input type="text" name="birthdate"
   44:              data-testid="birthdate" placeholder="Fecha de nacimiento" onChange={onChange} />
   45:       <input type="text" name="email"
   46:              data-testid="email" placeholder="Correo electrónico" onChange={onChange} />
   47:       <button type="submit" disabled={errors.length !== 0}>Guardar</button>
   48:     </form>
   49:   )
   50: }
   51: 
   52: export default CreateTwitchAccount

Línea 47. Deshabilitamos el botón si existen errores

Ejecutemos nuestra prueba y crucemos dedos 🤞🏼

Lo hemos logrado 🎉🎉

Para finalizar y como una buena práctica, ejecutemos todas las pruebas.

Noooooo 😭, descuida, como lo comentamos arriba, los errores igual son vistos como oportunidades para aprender nuevas cosas. Analicemos, parece que en la línea 45 del componente CreateTwitchAccount esta el problema.

   20:   async function handleUsernameChange(event) {
   21:     const { username } = event.target
   22:     try {
   23:       await users(username)
   24:       setErrors([])
   25:     } catch(e) {
   26:       setErrors(e.errors)
   27:     } finally {
   28:       onChange(event)
   29:     }
   30:   }
   31: 
   32:   return(
   33:     <form onSubmit={handleSubmit}>
   34:       <ul>
   35:         {errors && errors.map((error, index) => <li key={index}>{error}</li>)}
   36:       </ul>
   37:       <input type="text" name="username"
   38:              data-testid="username" placeholder="Usuario" onChange={handleUsernameChange} />
   39:       <input type="text" name="password"
   40:              data-testid="password" placeholder="Password" onChange={onChange} />
   41:       <input type="text" name="birthdate"
   42:              data-testid="birthdate" placeholder="Fecha de nacimiento" onChange={onChange} />
   43:       <input type="text" name="email"
   44:              data-testid="email" placeholder="Correo electrónico" onChange={onChange} />
   45:       <button type="submit" disabled={errors.length !== 0}>Guardar</button>
   46:     </form>
   47:   )

…
    5:   it('crear cuenta correctamente', async () => {
    6:     const props = {
    7:       createAccount: jest.fn(),
    8:       users: jest.fn().mockResolvedValue(),
    9:     }
   10: 
   11:     render(
   12:       <CreateTwitchAccount {...props} />
   13:     )
   14: 
   15:     await act(() => {
   16:       fireEvent.change(screen.getByTestId('username'), { target: { value: 'Gabriel' } })
   17:     })
…

Ahora si, ejecutemos todas las pruebas.

¡Por fin!, dame esos cinco ✋