[Testing] Testing in React

Prueba de una función

Cree una nueva aplicacion con 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;

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 espeficació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 a l 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, { Component } from "react";

class Checkbox extends Component {
  state = {
    isChecked: false,
  };

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

export default Checkbox;

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

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import * as serviceWorker from "./serviceWorker";
import Checkbox from "./components/checkbox";

ReactDOM.render(
  <Checkbox labelActive="Active" labelInactive="Inactive" />,
  document.getElementById("root")
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

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".

Nótese que antes de cada prueba (beforeEach), se asocia el componente a un nuevo div. Luego de cada prueba (afterEach) el componente se retira del DOM.

El método act se encarga de renderizar el componente.

import React from "react";
import ReactDOM from "react-dom";
import { act } from "react-dom/test-utils";
import Checkbox from "../checkbox";

let container;

beforeEach(() => {
  container = document.createElement("div");
  document.body.appendChild(container);
  act(() => {
    ReactDOM.render(
      <Checkbox labelActive="Active" labelInactive="Inactive" />,
      container
    );
  });
});

afterEach(() => {
  document.body.removeChild(container);
  container = null;
});

it("Defaults to Inactive label", () => {
  const label = container.querySelector("label");
  expect(label.textContent).toBe("Inactive");
});

Ejecute la prueba con npm test.

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

it("Checkbox inactive by default", () => {
  const checkbox = container.querySelector("input");
  expect(checkbox.checked).toBe(false);
});

Probar eventos

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

it("Checkbox status and label changes when clicked", () => {
  const checkbox = container.querySelector("input");
  const label = container.querySelector("label");
  act(() => {
    checkbox.dispatchEvent(new MouseEvent("click", { bubbles: true }));
  });
  expect(label.textContent).toBe("Active");
  expect(checkbox.checked).toBe(true);
});