[Testing] Testing in React

Presentación

En este tutorial aprenderemos cómo realizar pruebas en React. Iniciaremos con la prueba de una función y luego con la prueba de un componente.

Prueba de una función

Cree una nueva aplicación con el comando npx create-react-app. Dentro de la carpeta src cree una nueva carpeta denominada components.

Cree un nuevo archivo denominado sum.js con el siguiente contenido:

const sum = (value1, value2) => value1 + value2;

export default sum;

La función sum toma como parámetro dos valores y retorna su suma.

Ahora vamos a probar el correcto funcionamiento de esa función. Para esto, dentro de la carpeta components cree una nueva carpeta denominada __tests__ y agregue un archivo denominado sum.test.js con el siguiente contenido:

import sum from "../sum";

describe("sum", function () {
  it("adds 1 + 2 to equal 3", function () {
    expect(sum(1, 2)).toBe(3);
  });
});

Para ejecutar la prueba corra el comando npm test.

En esta prueba se pueden identificar varios elementos:

• La suite de pruebas que se declara con el método describe.
• La especificación de la prueba declarada con el método it.
• La expectativa, declarada con el método expect, que en este caso es que el llamado al método sum con los parámetros 1 y 2 de como resultado 3.

Prueba de un componente en React

Dentro de la carpeta src/components cree un nuevo archivo denominado checkbox.js. Este componente tendrá un cuadro de chequeo (chekbox) que cambiará su etiqueta según se encuentre activo o inactivo.

El componente tiene el siguiente contenido:

import React, { useState } from "react";

function Checkbox(props) {
  const [status, setStatus] = useState({ isChecked: false });

  const onChange = () => {
    setStatus({ isChecked: !status.isChecked });
  };

  return (
    <div>
      <label>
        <input type="checkbox" checked={status.isChecked} onChange={onChange} />
        {status.isChecked ? props.labelActive : props.labelInactive}
      </label>
    </div>
  );
}

export default Checkbox;

Modifique el archivo src/index.js para que el nuevo componente sea el principal, así:

import { createRoot } from 'react-dom/client';
import Checkbox from './components/checkbox';

const container = document.getElementById("root");
const root = createRoot(container);
root.render(<Checkbox labelActive="Active" labelInactive="Inactive" />)

Cree un nuevo archivo de pruebas denominado __tests__/checkbox.test.js.

En esa prueba vamos a testear, que cuando el componente se renderiza, el contenido del label, será por defecto, "Inactive".

import { render, screen, fireEvent } from "@testing-library/react"
import Checkbox from "../checkbox";

test("Defaults to Inactive label", ()=>{
    render(<Checkbox labelActive="Active" labelInactive="Inactive"/>);
    expect(screen.getByLabelText("Inactive")).toBeInTheDocument();
})

Ejecute la prueba con npm test.

La siguiente prueba verifica que el checkbox esté desmarcado por defecto:

//...
test("Checkbox inactive by default", () => {
    render(<Checkbox labelActive="Active" labelInactive="Inactive"/>);
    const cb = screen.getByTestId("cb");
    expect(cb).toBeInTheDocument();
    expect(cb).not.toBeChecked();
});

Probar eventos

El siguiente código se encarga de probar que cuando se hace clic en el label, el estado del checkbox y del texto del label también cambian:

test("Checkbox status and label changes when clicked", () => {
    render(<Checkbox labelActive="Active" labelInactive="Inactive"/>);
    fireEvent.click(screen.getByLabelText("Inactive"))

    expect(screen.getByLabelText("Active")).toBeInTheDocument();

    const cb = screen.getByTestId("cb");
    expect(cb).toBeInTheDocument();
    expect(cb).toBeChecked();
  });

Reto

Probar el comportamiento de un componente denominado Like. Este componente está conformado por: (i) un párrafo que muestra el número de likes de una publicación en el formato "Likes: 0"; (ii) un botón "Likes" que incrementa en 1 el número de likes; y (iii) un botón "Dislike" que decrementa en 1 el número de likes.

Este es el código del componente:

import { useState } from "react";

function Like(){
    const [likes, setLikes] = useState(0);
    const handleIncrement = () => {
        setLikes(likes + 1)
    };
    
    const handleDecrement = () => {
        setLikes(likes - 1)
    };

    return (
        <div>
          <p>Likes: {this.state.likes}</p>
          <button id="increment" onClick={handleIncrement}>
            Like
          </button>
          <button id="decrement" onClick={handleDecrement}>
            {" "}
            Dislike
          </button>
        </div>
      );
}

export default Like;

Pruebas a desarrollar

Incluya, en una suite, las siguientes pruebas:

1. Que por defecto, el componente muestra en el párrafo el valor "Likes: 0".
2. Que cuando se hace clic en el botón Like, el número de likes se incremente en uno.
3. Que cuando se hace clic en el botón Dislike el número de likes se decrementa en uno.