Si conoces muy poco sobre qué es Material UI (MUI) te recomiendo mi artículo Formulario en React con MUI: guía para principiantes.
En este artículo aprenderemos a probar diferentes componentes de MUI desde componentes de tipo TextField hasta los más complejos como Autocomplete.
Prueba del componentes TextField
Para probar los componentes TextField solo debemos de buscarlo por el nombre de su label y escribir en él.
1: describe("TextField", () => {
2: it("permite escribir en el input", () => {
3: render(<TextField id="email" label="Email" />); // Renderizamos el componente
4:
5: const input = screen.getByLabelText(“Email"); // Buscamos el componente con label Email
6:
7: fireEvent.change(input, {
8: target: { value: "[email protected]" }, // Escribimos en el input
9: });
10:
11: expect(input).toHaveValue(“[email protected]"); // Validamos que el campo email cambie el valor
12: });
13: });
Prueba del componente Select
Para los componentes Select, debemos buscarlo por el nombre de su label, luego lo abrimos. Una vez abierto, seleccionamos la opción deseada.
1: import {FormControl, InputLabel, MenuItem, Select} from "@mui/material";
2: import { render, screen, fireEvent } from "@testing-library/react";
3: import {useState} from "react";
4:
5: function Component() {
6: const [age, setAge] = useState("");
7:
8: const handleChange = (event) => {
9: setAge(event.target.value);
10: };
11:
12: return (
13: <FormControl fullWidth>
14: <InputLabel id="age-label">Edad</InputLabel>
15: <Select
16: labelId="age-label"
17: id="age-select"
18: value={age}
19: label="Edad"
20: onChange={handleChange}
21: >
22: <MenuItem value={1}>- 10 años</MenuItem>
23: <MenuItem value={2}>20 años</MenuItem>
24: <MenuItem value={3}>+ 30 años</MenuItem>
25: </Select>
26: </FormControl>
27: );
28: }
29:
30: describe(“Select", () => {
31: it("permite seleccionar una edad", () => {
32: render(
33: <Component/>
34: );
35:
36: // Abrir el select
37: const select = screen.getByLabelText("Edad");
38: fireEvent.mouseDown(select);
39:
40: // Seleccionar opción
41: const option = screen.getByText("20 años");
42: fireEvent.click(option);
43:
44: // Verificar selección
45: expect(select).toHaveTextContent("20 años");
46: });
47: });
Prueba de Radio Group
Probar el componente Radio Group basta con buscar la opción mediante su label y luego hacer clic.
1: import {FormControl, FormControlLabel, FormLabel, Radio, RadioGroup} from "@mui/material";
2: import { render, screen, fireEvent } from "@testing-library/react";
3: import {useState} from "react";
4:
5: function Componente() {
6: const [value, setValue] = useState("female");
7:
8: const handleChange = (event) => {
9: setValue(event.target.value);
10: };
11:
12: return (
13: <FormControl>
14: <FormLabel id="gender-label">Gender</FormLabel>
15:
16: <RadioGroup
17: aria-labelledby="gender-label"
18: name="gender"
19: value={value}
20: onChange={handleChange}
21: >
22: <FormControlLabel value="female" control={<Radio />} label="Femenino" />
23: <FormControlLabel value="male" control={<Radio />} label="Masculino" />
24: <FormControlLabel value="other" control={<Radio />} label="Otro" />
25: </RadioGroup>
26: </FormControl>
27: );
28: }
29:
30: describe("RadioGroup", () => {
31: it("permite cambiar la opción seleccionada", () => {
32: render(<Componente />);
33:
34: const male = screen.getByLabelText("Masculino");
35:
36: fireEvent.click(male);
37:
38: expect(male).toBeChecked();
39: });
40: });
Prueba del componente Checkbox
Buscamos el checkbox mediante su label y hacemos clic para seleccionarlo.
1: import { render, screen, fireEvent } from "@testing-library/react";
2: import {Checkbox, FormControlLabel} from "@mui/material";
3:
4: describe("Checkbox", () => {
5: it("permite marcar y desmarcar el checkbox", () => {
6: render(<FormControlLabel
7: control={<Checkbox defaultChecked />}
8: label="Términos y condiciones"
9: />);
10:
11: const checkbox = screen.getByLabelText("Términos y condiciones");
12: expect(checkbox).toBeChecked();
13:
14: fireEvent.click(checkbox);
15: expect(checkbox).not.toBeChecked();
16: });
17: });
Prueba del componente Switch
Para probar los componentes Switch debemos hacer lo mismo que con los componentes CheckBox, buscarlo por su label y hacer clic.
1: import { render, screen, fireEvent } from "@testing-library/react";
2: import {FormControlLabel, Switch} from "@mui/material";
3:
4: describe("Switch", () => {
5: it("permite activar y desactivar el switch", () => {
6: render(<FormControlLabel
7: control={<Switch defaultChecked />}
8: label="Activo"
9: />);
10:
11: const switchInput = screen.getByLabelText("Activo");
12:
13: expect(switchInput).toBeChecked();
14:
15: fireEvent.click(switchInput);
16: expect(switchInput).not.toBeChecked();
17: });
18: });
Prueba del componente Autocomplete
Para probar el componente Autocomplete debemos seguir este orden: buscar el autocomplete por su label, luego escribir la opción que deseamos, finalmente, hacemos clic en ella.
1: import { render, screen, fireEvent } from "@testing-library/react";
2: import TextField from "@mui/material/TextField";
3: import Autocomplete from "@mui/material/Autocomplete";
4:
5: const top100Films = [
6: { label: "The Shawshank Redemption" },
7: { label: "The Godfather" },
8: { label: "The Dark Knight" },
9: ];
10:
11: function Component() {
12: return (
13: <Autocomplete
14: disablePortal
15: options={top100Films}
16: sx={{ width: 300 }}
17: getOptionLabel={(option) => option.label}
18: renderInput={(params) => (
19: <TextField {...params} label="Película" />
20: )}
21: />
22: );
23: }
24:
25: describe("Autocomplete", () => {
26: it("permite seleccionar una película", () => {
27: render(<Component />);
28:
29: const input = screen.getByLabelText("Película");
30: fireEvent.change(input, {
31: target: { value: "Godfather" },
32: });
33:
34: fireEvent.click(screen.getByText("The Godfather"));
35:
36: expect(input.value).toBe("The Godfather");
37: });
38: });
Conclusión
Saber como probar cada uno de los componentes nos permite simular el comportamiento que tendría un usuario final en nuestra aplicación. Además, evitamos configurar todo nuestro ambiente local para agregar o modificar alguna funcionalidad.
Si quieres aprender más sobre como probar tus componentes en React te invito a revisar mi hub de testing en React.
Hub de Testing en React
