Table-driven testing con it.each en React
Contenido del curso
Table-driven testing con it.each en React
Contenido del curso
Juan Jose Bernal Villamarin
Cristian Contreras
Wilmer Garzon Cabezas
Team Platzi
Ulqernesh Karvenae
Ulqernesh Karvenae
Juan Diego Mejia Maestre
Jesús Manuel Alarcón Maldonado
Elioenai Garcia
Wilmer Garzon Cabezas
Team Platzi
Oscar Daniel Trinidad Rodríguez
Wilmer Garzon Cabezas
Team PlatziTest de la clase incluyendo la división entre cero:
import { describe, it, expect } from 'vitest'; import { render, screen } from '@testing-library/react'; import { Calculator } from './Calculator'; describe('<Calculator />', () => { const useCasesTest = [ { a : 2, b : 3, operation : 'add', expected : 5 }, { a : 5, b : 3, operation : 'subtract', expected : 2 }, { a : 2, b : 3, operation : 'multiply', expected : 6 }, { a : 6, b : 3, operation : 'divide', expected : 2 }, { a : 6, b : 0, operation : 'divide', expected : "Error" }, ]; it.each(useCasesTest)('renders calculator with %p expected $expected when $a and $b will be $operation', ({ a, b, operation, expected }) => { render(<Calculator a={a} b={b} operation={operation} />); const result = screen.getByText(`Result: ${expected}`); expect(result).toBeInTheDocument(); }); }); ```import { describe, it, expect } from 'vitest';import { render, screen } from '@testing-library/react';import { Calculator } from './Calculator'; describe('\<Calculator />', () => { const useCasesTest = \[ { a : 2, b : 3, operation : 'add', expected : 5 }, { a : 5, b : 3, operation : 'subtract', expected : 2 }, { a : 2, b : 3, operation : 'multiply', expected : 6 }, { a : 6, b : 3, operation : 'divide', expected : 2 }, { a : 6, b : 0, operation : 'divide', expected : "Error" }, ];   it.each(useCasesTest)('renders calculator with %p expected $expected when $a and $b will be $operation', ({ a, b, operation, expected }) => { render(*\<Calculator* a={a} b={b} operation={operation} */>*); const result = screen.getByText(`Result: ${expected}`); expect(result).toBeInTheDocument(); });});
La sintaxis con placeholders $ en los strings de las descripciones como en it.each (o test.each) es específica de Vitest y Jest, porque estas bibliotecas tienen esta funcionalidad incorporada.
¡Excelente aporte! 🎯
Efectivamente, la sintaxis de placeholders $ en it.each/test.each es una característica nativa de Vitest y Jest que permite interpolar valores dinámicamente en las descripciones de los tests. Este detalle técnico es importante para entender que esta funcionalidad no está disponible en todos los frameworks de testing.
¡Gracias por el complemento! 🥇
import { render, screen } from "@testing-library/react"; import { describe, it, expect } from "vitest"; import { Calculator } from "./Calculator"; describe("<Calculator />", () => { const useCasesTest = [ { a: 1, b: 2, operation: "add", expected: 3 }, { a: 10, b: 5, operation: "subtract", expected: 5 }, { a: 3, b: 2, operation: "multiply", expected: 6 }, { a: 10, b: 4, operation: "divide", expected: 2.5 }, { a: 10, b: 0, operation: "divide", expected: "Error" }, ]; it.each(useCasesTest)( "Should return $expected when $a and $b is $operation", ({ a, b, operation, expected }) => { render(<Calculator a={a} b={b} operation={operation} />); const result = screen.getByText(`Result: ${expected}`); expect(result).toBeInTheDocument(); }, ); });
import { describe, it, expect} from "vitest"; import { Calculator } from "./Calculator"; import { render, screen } from "@testing-library/react"; describe("<Calculator />", () => { const useCasesTest = [ { a: 5, b: 3, operation: 'add', expected: 8 }, { a: 5, b: 3, operation: 'subtract', expected: 2 }, { a: 5, b: 3, operation: 'multiply', expected: 15 }, { a: 6, b: 3, operation: 'divide', expected: 2 }, ]; it.each(useCasesTest)('should correctly perform $operation on $a and $b', ({ a, b, operation, expected }) => { render(<Calculator a={a} b={b} operation={operation} />); const result = screen.getByText("Result: " + expected); expect(result).toBeInTheDocument(); }); });
💻👨💻 ¡Listo! Quise ir un poco más allá y probar también el caso cuando la operación es inválida que sería el caso por default del switch, y así quedaron mis tests:
import {describe, it, expect} from "vitest"; import { render, screen } from "@testing-library/react" import { Calculator } from "./Calculator"; describe('<Calculator />', () => { const useCasesTest = [ {a: 1, b: 2, operation: "add", expected: 3}, {a: 1, b: 2, operation: "subtract", expected: -1}, {a: 3, b: 2, operation: "multiply", expected: 6}, {a: 6, b: 2, operation: "divide", expected: 3}, {a: 6, b: 0, operation: "divide", expected: "Error"}, {a: 6, b: 0, operation: "AnyOtherThing", expected: "Invalid operation"}, ] it.each(useCasesTest)('Deberia retornar $expected cuando $a y $b son $operation', ({a, b, operation, expected}) => { render(<Calculator a={a} b={b} operation={operation} />) const result = screen.getByText(`Result: ${expected}`); expect(result).toBeInTheDocument(); } ); })
✅ Passed
✓ src/components/experimental/Calulator.test.tsx (5 tests) 41ms ✓ <Calulator /> > Debería retornar 3 cuando 1 y 2 son 'add' ✓ <Calulator /> > Debería retornar 2 cuando 5 y 3 son 'subtract' ✓ <Calulator /> > Debería retornar 6 cuando 2 y 3 son 'multiply' ✓ <Calulator /> > Debería retornar 2 cuando 6 y 3 son 'divide' ✓ <Calulator /> > Debería retornar 'Error' cuando 6 y +0 son 'divide'
Excelente trabajo Elioenai! 💚
Dejo un ejemplo de la implementacion usando tipado. y regExp interface Case { a: number b: number operation : Operation expected: string}
describe("Calculator", () => { const a = 1 const b = 10 const common = {a,b}
const useCases : Case[]= [ {...common, operation : "add", expected: "11" }, {...common, operation : "substract", expected: "-9" }, {...common, operation : "multiply", expected: "10" }, {...common, operation : "divide", expected: "0.1" }, {...common, b: 0, operation : "divide", expected: "Error" }, // dividir entre 0 {...common, operation : "anasbsy", expected: "Invalid operation"}, ]
it.each(useCases)(Deberia retornar $expected cuando $a y $b son $operation, (option) => { render(<Calculator {...option} />) const reg = new RegExp(option.expected, "i") const label = screen.getByText(reg) expect(label).toBeInTheDocument() })})
interface Case { a: number b: number operation : Operation expected: string } describe("Calculator", () => { const a = 1 const b = 10 const common = {a,b} const useCases : Case[]= [ {...common, operation : "add", expected: "11" }, {...common, operation : "substract", expected: "-9" }, {...common, operation : "multiply", expected: "10" }, {...common, operation : "divide", expected: "0.1" }, {...common, b: 0, operation : "divide", expected: "Error" }, // dividir entre 0 {...common, operation : "anasbsy", expected: "Invalid operation"}, ] it.each(useCases)(`Deberia retornar $expected cuando $a y $b son $operation`, (option) => { render(<Calculator {...option} />) const reg = new RegExp(option.expected, "i") const label = screen.getByText(reg) expect(label).toBeInTheDocument() }) })
Omg que lindo que incluyas conocimientos de otros cursos here, Gran aporte Oscar! 💚
