Hook de Jest para clase carrito [Ejercicio práctico]

En el ejercicio práctico de este post vas a aprender en qué consiste el hook de Jest para clase carrito. Entenderás cuál es su utilidad y por qué es tan importante para facilitar la estructura de código, así como para facilitar su lectura y hacer más rápida su ejecución.

Recuerda que, cuantas más herramientas domines para el desarrollo de código, más sencillo te resultará encontrar soluciones ante posibles problemas que aparezcan en tus proyectos. Por esto, no dudes en seguir leyendo y aprende cómo definir el hook de Jest para clase carrito con este ejercicio práctico.

Hook de Jest para clase carrito

Como te comentamos en nuestro artículo sobre hooks y manejo de excepciones para TDD, los hooks son muy importantes para el desarrollo de código, debido a que nos ayudan a personalizar las acciones que se van a listar en cada uno de los test que tiene un mismo módulo de trabajo.

Así pues, a continuación te contaremos cómo se ve un extracto de código sin haber ejecutado el hook, cómo describimos el hook y cómo se verá el hook introducido.

Antes de introducir el hook

Antes de introducir el hook, te enseñamos los test que hemos realizado en artículos anteriores para la clase carrito. Con estos procesos comprobamos que no hubiese ningún ítem en un inicio; que una vez se añadiera uno, la función devolviera el ítem agregado, y que el ítem sí estuviera posicionado dentro del carrito del marketplace.

Si quieres conocer con más profundidad el proceso que desarrollamos en este extracto, no te pierdas los artículos sobre el test inicial y los test adicionales.

describe ('Testing Carrito class', () =>  {
             describe ('getTotalItems0, () => {
                        it ('Should return 0 items at initialization', () =>  {
                            const carrito = new Carrito();
                            expect (carrito.getTotalItems()).toEqual (0)
                        })

                        it ('Should return 1 item after adding 1 product', () => {
                            const carrito = new Carrito();
                            carrito.addItem (
                                     name: 'Nigiri',
                                     price: 1.6
                             })
                            expect (carrito.getTotalItems()).toEqual (1)
                       })
 })


describe ('addItem', () => {
it ( 'Should have the item in the Carrito.items', () => {
    const carrito = new Carrito();
    carrito.addItem({
                name: ''Nigiri',
                price: 1.6
   )}
    expect (carrito.items.toContainEqual ({
                    name: ''Nigiri',
                price: 1.6
   )}  

El hook

Ahora que ya sabemos cómo lucen y cómo se instancian los test para la clase carrito, es la hora de ver cómo podemos definir las configuraciones para el hook, que nos ayudarán a personalizar cada uno de los test del módulo del proyecto.

Para ello, solo tenemos que instanciar las clases y elementos con el método let con todas sus características. Después, vamos a describir el hook con el método de beforeEach para instanciar la clase en un solo lugar.

let carrito
let nigiriItem = {
     name: 'Nigiri',
     price: 1.6
}

// Hook de Jest
beforeEach(() => {
         carrito = new Carrito()
})

Con el hook introducido

Ahora que tenemos el hook introducido dentro del módulo de nuestro programa, podemos eliminar varias de las líneas de código que se encontraban en la primera visualización. Aquí vamos a encontrar la definición de los test sin la repetitiva instauración de la clase carrito o el elemento de nigitiItem, que equivale a los ítems que se le agregan al carrito.

describe ('Testing Carrito class', () =>  {
             describe ('getTotalItems0, () => {
                        it ('Should return 0 items at initialization', () =>  {
                            expect (carrito.getTotalItems()).toEqual (0)
                        })

                        it ('Should return 1 item after adding 1 product', () => {
                            carrito.addItem (nigiriItem
)
                            expect (carrito.getTotalItems()).toEqual (1)
                       })
 })


describe ('addItem', () => {
it ( 'Should have the item in the Carrito.items', () => {
    carrito.addItem(nigiriItem)
    expect (carrito.items.toContainEqual (nigiriItem))  

Como podrás apreciar, habrá menos líneas de código, lo que puede facilitar la reestructuración del código y la lectura del mismo por otras personas interesadas en la sección del testing.

Sigue aprendiendo con KeepCoding

Ahora sabes cómo introducir el hook de Jest para clase carrito con este ejercicio práctico y cómo luce un extracto de código para el testing, antes y después de su utilización. Esta herramienta es muy útil para ahorrar trabajo y espacio en las líneas de código. Si quieres conocer más herramientas similares que te harán destacar en el mundo IT, anímate a revisar el temario de nuestra formación intensiva en Desarrollo Web Full Stack Bootcamp. ¡Entra ahora y atrévete a cambiar tu vida al convertirte en un profesional en pocos meses!