Evita dependencias con Spy y Mocks - Tutorial de React.js

Al escribir pruebas, es un tanto confuso el saber hasta dónde llega la prueba, es decir, se nos complica entender el concepto de "solo hay que probar el código de la clase o servicio que estamos usando". Esto significa que no tenemos que probar las dependencias. Vamos a entender esto con el siguiente caso. En el componente StoreMerchandise tenemos un método llamado «getProductPrice», el cual va a retornar una cadena de texto que nos indica "El precio de determinado producto es de 123 dólares", pero el producto viene determinado por otro método. Este método, como podemos notar en la sección de los imports, proviene de otro componente. Este componente llamado product.tsx tiene aquí directamente este método getProductName. Aquí está haciendo simplemente el retorno de una cadena de texto que dice tickets, por lo cual al final en este caso en específico la cadena de texto diría "El precio de tickets es de 123 dólares". Pero ¿cómo podemos hacer esta prueba sin necesidad de invocar al otro método?, porque desde aquí no estamos haciendo esa prueba. Bueno, vamos a verificar lo siguiente. Si nosotros ejecutamos directamente esta prueba que tenemos aquí should get product price label, vamos a notar que simplemente tenemos aquí algo que está fallando porque simplemente no estamos haciendo la validación adecuada. Como te das cuenta, aquí en expectation estamos esperando que diga "El precio de promoción es de 123", pero estamos recibiendo el precio de tickets. Tal vez nosotros necesitemos hacer una validación extra o ¿cómo podemos invocar y cambiar ese método? Realmente, ¿no podríamos cambiarlo así nada más? Entonces, vamos a verificar rápidamente aquí en esta parte donde tenemos el console.log cómo precisamente nos está llegando ese contenido. Bueno, la idea aquí es que podemos nosotros sobrescribir este contenido utilizando los espías. Para esto vamos a utilizar el método llamado «jest.spyOn». Ahora, este método se vuelve de un uso muy común, por lo cual vamos a escribir una sencilla abstracción en la sección de los imports y vamos a escribir «import spyOn = jest.spyOn». Sí, parece algo simple, pero la verdad nos ayuda a entender mejor la prueba. Así que desde aquí ya podría escribir yo «spyOn» y vamos a indicar que quiero espiar sobre el producto. Así que vamos a escribir rápidamente en la sección de los imports la referencia hacia el producto. Aquí lo que estoy haciendo es utilizando un comodín y estoy escribiendo impórtame todo lo que esté en producto y vamos a hacer referencia a través de la variable product. Entonces, desde aquí yo le voy a indicar al espía "Ey, espía, tienes que espiar directamente a lo que tenemos en «product»", es decir, a todo lo que nosotros tenemos aquí basado en el import que agregamos. Desde aquí vamos a indicar que vamos a revisar un método. ¿Cuál método? Bueno, el método que nosotros necesitamos es getProductName. Entonces, lo que estaremos indicándole aquí al espía es "Ey, espía, cuando este método «getProductName», que pertenece a product, sea llamado en cualquier ámbito, vamos a retornar un valor determinado". Por ejemplo, aquí le voy a indicar yo que vamos a hacer un «mock» del «ReturnValue». Esto significa que voy a retornar el valor que yo desee, es decir, cada que se invoque o cada que algún otro método invoque al método getProductName yo puedo retornar el valor que yo desee. En este caso, por ejemplo, voy a retornar el valor «promoción» y desde aquí cada que se invoque este método vamos a hacer el cambio. Ahora vamos a probar y vamos a verificar que nuestra prueba se ejecute. Vamos a pulsar en el botón Run y vamos a validar. Como vemos, nuestra prueba ya está pasando. Y si nosotros atendemos directamente al console.log vemos como ahora indica ya "El precio de promoción es 123 dólares". También yo podría hacer los cambios y enviar aquí cualquier cadena de texto. Con esto estoy evitando que se ejecute el método getProductName y puedo validar con lo que yo necesite. Así simplemente estoy validando el código que tengo en el componente sobre el cual estoy escribiendo la prueba. Ahora, algo muy importante es que no olvides resetear los mocks al terminar de usarlos porque si no lo haces se van a arrastrar los valores de una prueba a otra. Por ejemplo, si yo no limpio este mock, cuando yo trabaje con otra prueba que haga referencia al mismo método vamos a seguir mostrando promoción y no mostrando los resultados originales. Así que para hacer esa limpieza vamos a agregar aquí una variable y con esto estaré guardando el contenido de este espía en esta variable llamada spy. Y desde aquí, al terminar mi expectation, yo puedo ejecutar el método «spy.mockRestore», así restablezco todo a su estado original. O también podría hacer lo siguiente. Podría agregar un método fuera de la prueba llamado «afterEach». Con esto, después de que se ejecute cada prueba, yo puedo estar limpiando los mocks. Aquí «clearAllMocks» va a limpiar o a resetear todos los componentes, pero no la implementación. Y «resetAllMocks» va a resetear absolutamente todo. De hecho, resetAllMocks cubre también a clearAllMocks, pero a veces podemos utilizar uno u otro dependiendo del caso de uso. Con esto podemos darnos cuenta que podemos manipular los resultados de los métodos o las dependencias y así hacer más sencillas nuestras pruebas.