Estructura y Creación de Tests en JavaScript con Vitest
Contenido del curso
Jorge Eliecer Rangel Jimenez
Víctor Rolack
Wilmer Garzon Cabezas
Team Platzi
Nicoll Idaly Angulo Mejia
Wilmer Garzon Cabezas
Team Platzi
Juan Jose Bernal Villamarin
Wilmer Garzon Cabezas
Team PlatziJuan Jose Bernal Villamarin
Wilmer Garzon Cabezas
Team Platzi
Elioenai Garcia
Gilberto Santamaria
Daniel Gonzalez Herrera
Ulqernesh Karvenae
it('Should be palindrome', () => { const palindromeVerify = (word: string) => { const reverseWord = word.split('').reverse().join('') if(reverseWord === word) return true return false } const isPalindrome = palindromeVerify("oso") expect(isPalindrome).toBe(true) })
También puedes hacer test negando algo :)
it("dos textos iguales", () => { const text1 = "platzi conf"; const text2 = "platzi"; expect(text1).not.toBe(text2); });
Asi es Victor!
Efectivamente, el matcher .not es super útil para verificar casos negativos en nuestros tests. Tu ejemplo demuestra perfectamente cómo podemos asegurar que dos valores NO sean iguales, lo cual es tan importante como verificar igualdades.
¡Gracias por compartir esta técnica de testing! 💡
jest debería seguirse usando?
¡Claro Nicoll!
Tanto Jest como Vitest son excelentes herramientas de testing. La elección dependerá del stack tecnológico de tu empresa/equipo. En el curso usamos Vitest por su integración natural con Vite, pero la sintaxis de testing es prácticamente idéntica en ambos - solo cambia la configuración. 🛠️
Lo más común es comparar objetos y arreglos, creo que el toEqual es la manera más sencilla de hacerlo, pero no se si a nivel profundo sea una comparación valida, sin embargo aquí dejo mi aporte de los 3 it adicionales que creé, saludos
describe('My first test', () => { it('two numbers add function ', () => { const sum = (a: number, b: number) => a + b; const result = sum(2, 3);
expect(result).toBe(5); });
it('two equal strings', () => { const text1 = 'PlayStation'; const text2 = 'PlayStation';
expect(text1).toEqual(text2); });
it('two equal objects', () => { const obj1 = { name: 'John', age: 25 }; const obj2 = { name: 'John', age: 25 }; expect(obj1).toEqual(obj2); });
it('two equal arrays', () => { const arr1 = [1, 2, 3]; const arr2 = [1, 2, 3]; expect(arr1).toEqual(arr2); });
it('two equal arrays with objects', () => { const arr1 = [{ name: 'John', age: 25 }, { name: 'Jane', age: 30 }]; const arr2 = [{ name: 'John', age: 25 }, { name: 'Jane', age: 30 }]; expect(arr1).toEqual(arr2); });
});
Gran aporte Juan, y gracias por traer lo del toEqual, entre mas opciones tengamos... mas robustos seran nuestros test 💚
Lo más común es comparar objetos y arreglos, creo que el toEqual es la manera más sencilla de hacerlo, pero no se si a nivel profundo sea una comparación valida, sin embargo aquí dejo mi aporte de los 3 it adicionales que creé, saludos:
describe('My first test', () => { it('two numbers add function ', () => { const sum = (a: number, b: number) => a + b; const result = sum(2, 3); expect(result).toBe(5); }); it('two equal strings', () => { const text1 = 'PlayStation'; const text2 = 'PlayStation'; expect(text1).toEqual(text2); }); it('two equal objects', () => { const obj1 = { name: 'John', age: 25 }; const obj2 = { name: 'John', age: 25 }; expect(obj1).toEqual(obj2); }); it('two equal arrays', () => { const arr1 = [1, 2, 3]; const arr2 = [1, 2, 3]; expect(arr1).toEqual(arr2); }); it('two equal arrays with objects', () => { const arr1 = [{ name: 'John', age: 25 }, { name: 'Jane', age: 30 }]; const arr2 = [{ name: 'John', age: 25 }, { name: 'Jane', age: 30 }]; expect(arr1).toEqual(arr2); }); }); ```describe('My first test', () => { it('two numbers add function ', () => { const sum = (a: number, b: number) => a + b; const result = sum(2, 3);   expect(result).toBe(5); });   it('two equal strings', () => { const text1 = 'PlayStation'; const text2 = 'PlayStation';   expect(text1).toEqual(text2); });   it('two equal objects', () => { const obj1 = { name: 'John', age: 25 }; const obj2 = { name: 'John', age: 25 }; expect(obj1).toEqual(obj2); });   it('two equal arrays', () => { const arr1 = \[1, 2, 3]; const arr2 = \[1, 2, 3]; expect(arr1).toEqual(arr2); });   it('two equal arrays with objects', () => { const arr1 = \[{ name: 'John', age: 25 }, { name: 'Jane', age: 30 }]; const arr2 = \[{ name: 'John', age: 25 }, { name: 'Jane', age: 30 }]; expect(arr1).toEqual(arr2); }); });
Gran aporte Juan, y gracias por traer lo del toEqual, entre mas opciones tengamos... mas robustos seran nuestros test 💚
Vaya forma de decir que un test no pasó ó falló 😎
Agregue dos test, que generan números aleatorios para poder poder ver siempre valores distintos.
import {describe, it, expect} from 'vitest'; describe('Primer conjunto de test',()=>{ it('Suma de dos numeros',()=>{ const suma = (a:number,b:number):number=>a+b; const resultado:number = suma(2,6); expect(resultado).toBe(8); }); it('Dos textos iguales ',()=>{ const texto1:string = 'PlatziConf'; const texto2:string = 'PlatziConf'; expect(texto1).toBe(texto2); }); it('Un numero par',()=>{ const minNumber:number = 1; const maxNumber:number =10; const randomNumber:number = Math.floor(Math.random()*(maxNumber - minNumber) + minNumber); console.log(randomNumber); const isOdd:number = randomNumber % 2; expect(isOdd).toBe(0); }); it('Numero Mayor a',()=>{ const minNumber:number = 1; const maxNumber:number =10; const randomNumber:number = Math.floor(Math.random()*(maxNumber - minNumber) + minNumber); console.log(randomNumber); expect(randomNumber).toBeGreaterThan(minNumber); }) })
it('Un texto es palíndromo', () => { const checkPalindrome = (text: string) => { const normalized = text.toLowerCase().replace(/ /g, ''); return normalized.split('').reverse().join('') === normalized; } const text1 = 'Anita lava la tina'; expect(checkPalindrome(text1)).toBeTruthy(); });
import { describe, it, expect, vi } from "vitest"; describe("First Test", () => { it("sum two numbers", () => { const sum = (a: number, b: number) => a + b; const result = sum(2, 3); expect(result).toBe(5); }); it("equal two strings", () => { const str1 = "Hello"; const str2 = "Hello"; expect(str1).toBe(str2); }); it("is same content", () => { const obj1 = { name: "Peter", age: 12, }; const obj2 = { name: "Peter", age: 12, }; expect(obj1).toEqual(obj2); expect(obj1).toStrictEqual(obj2); expect(obj1).toMatchObject({ name: "Peter" }); expect(obj1).toHaveProperty("name"); expect(obj1).toHaveProperty("name", "Peter"); }); it("contains a value in an array", () => { const numbers = [10, 20, 30, 40]; expect(numbers).toContain(20); }); it("contains an object in an array", () => { const users = [ { id: 1, name: "Peter", }, { id: 2, name: "John", }, ]; expect(users).toContainEqual({ id: 2, name: "John", }); }); it("function was called with expected arguments", () => { const fn = vi.fn(); fn("Peter", 12); expect(fn).toHaveBeenCalledWith("Peter", 12); }); it("function was called one time", () => { const fn = vi.fn(); fn(); expect(fn).toHaveBeenCalledTimes(1); }); it("function throws an error", () => { const divide = (a: number, b: number) => { if (b === 0) { throw new Error("Cannot divide by zero"); } return a / b; }; expect(() => divide(10, 0)).toThrow(); }); it("matches object using asymmetric matchers", () => { const result = { id: "user-123", name: "John", createdAt: new Date(), tags: ["admin", "developer"], age: 25, }; expect(result).toMatchObject({ id: expect.any(String), name: "John", createdAt: expect.any(Date), tags: expect.arrayContaining(["admin"]), }); }); });
