Un novato junto a "React Testing" última parte (Firing Events)

Sun May 09 2021 10:48:00 GMT+0100

Me gustaría empezar este último post sobre “React Testing” comentando que nada más entrar en el apartado de Firing Events la documentación nos indica que en muchos proyectos se usa fireEvent, cuando la mayor parte deberias usar User-Event

FireEvent

Son eventos de los propios elementos del DOM, dichos eventos los podemos ver en la documentación oficial Developer Mozilla.

Como por el ejmplo el evento Click, el cual se ejecuta al pulsar nuestro ratón.

Aquí podemos ver un ejemplo sencillo de como funcionaría un componente Button y su test:

Componente

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import * as React from "react";
import "./Button.scss";

const Button = ({ onClick, text }) => {
  text = "Click fireEvent";
  return (
    <div className={"Button"}>
      <h3>DOMFireEvent</h3>
      <button type="submit" onClick={onClick}>
        {text}
      </button>
    </div>
  );
};

export default Button;

Test

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import * as React from "react";
import * as Testing from "@testing-library/react";
import Button from "./Button";  

test("mouseEvent click", () => {
  const changeHandle = jest.fn();
  const component = Testing.render(
    <Button onClick={changeHandle}>Click button to fireEvent</Button>
  );

  const button = component.getByText("Click fireEvent");

  Testing.fireEvent.click(button);

  expect(changeHandle).toHaveBeenCalledTimes(1);
});

En este punto la documentación aconseja que veamos los tipos de eventos que podemos encontrar.

Esta manera de llamar al evento es más directa, por ejemplo tenémos el evento change el cual nos simularía un cambio en el elemento.

Aquí podemos ver un ejemplo sencillo de como funcionaría un componente Input y su test:

Componente

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import * as React from "react";
import "./InputFireEvent.scss";

const InputFireEvent = () => {
  const [value, setValue] = React.useState("");
  const handleChange = (ev) => {
    ev.preventDefault();
    const inputtedValue = ev.currentTarget.value;
    setValue(inputtedValue);
  };

  return (
    <div className={"input-with-title"}>
      <h3>Change FireEvent</h3>
      <input value={value} aria-label="date-input" onChange={handleChange} />
    </div>
  );
};

export default InputFireEvent;

Test

1
2
3
4
5
6
7
8
9
10
11
12
import * as React from "react";
import * as Testing from "@testing-library/react";
import InputFireEvent from "./InputFireEvent";

test("change fireEvent", () => {
  const utils = Testing.render(<InputFireEvent />);
  const input = utils.getByLabelText("date-input");
  const date = "2021-02-03";

  Testing.fireEvent.change(input, { target: { value: date } });
  expect(input.value).toBe("2021-02-03");
});

Esta opción nos permite crear eventos que luego podemos lazar con fireEvent. La ventaja que nos proporciona además de poder usarlo en diferentes puntos de nuestro test, es que si necesita acceder a propiedades de eventos que no se pueden iniciar mediante código, lo puede hacer.

Puedes encontrar más información en #createeventeventname

Top