# Primeros pasos con Jest ## **Instalación para TypeScript / ts y tsx** ***Step 1:*** Inicio un proyecto con npm, esto crea el archivo package.json con todas las dependencias necesarias. La opción **-y** sirve para iniciar el proyecto sin que haga las preguntas de configuración. ``` npm init -y ``` ***Step 2:*** Instalo Jest y TypeScript en entorno desarrollo con la opción **-D**. ``` npm i -D jest typescript ``` ***Step 3:*** Instalo el tipado de TypeScript para Jest. ``` npm i -D ts-jest @types/jest ``` ***Step 4:*** Inicio TypeScript. Esto crea el fichero de configuración de TypeScript, **tsconfig.json**. ``` npx tsc --init ``` ***Step 5:*** Inicio ts-jest. Esto crea el fichero de configuración de Jest, **jest.config.js**. ``` npx ts-jest config:init ``` ***Step 6:*** Modifico el archivo **package.json** para ejecutar más fácilmente los test. #### package.json ```javascript= "scripts": { "test": "jest" }, ``` ### Ejemplo de código para hacer una prueba de un test. ***Step 1:*** Creo los dos archivos necesarios para la prueba, el que tiene el código de **TypeScript**, **suma.ts** y el del test, **suma.test.ts**. #### suma.ts ```typescript= export const suma = (a: number, b: number) => a + b ``` #### suma.test.ts ```typescript= import { suma } from "./suma" describe("sum_of_two_numbers", () => { it("sumar 1 + 2 es igual a 3", () => { expect(suma(1, 2)).toBe(3) }) }) ``` ***Step 2:*** Ejecuto el test para ver el resultado. ``` npm test ``` ![](https://hackmd.io/_uploads/B1iGxv02h.png) ## **Instalación para JavaScript y TypeScript / js, jsx, ts y tsx** ***Step 1:*** Hay que seguir los pasos del proceso de TypeScript y en el fichero **tsconfig.json**, descomentar la siguiente linea. ```javascript= "allowJs": true, ``` Esto hace que Jest funcione también con vanilla JavaScript. Ahora las dos versiones del código, JavaScript y TypeScript pasarán los tests. ### Ejemplo de código para hacer una prueba de los tests de JavaScript y TypeScript. ***Step 1:*** Creo los dos archivos necesarios para la prueba en **JavaScript**, el que tiene el código de JavaScript, **sumajs.js** y el del test, **sumajs.test.js**. #### Versión JavaScript / sumajs.js ```javascript= const suma = (a, b) => a + b module.exports = suma ``` #### Versión JavaScript / sumajs.test.js ```javascript= const suma = require("./sumajs") describe("sum_of_two_numbers", () => { it("sumar 1 + 2 es igual a 3", () => { expect(suma(1, 2)).toBe(3) }) }) ``` ***Step 2:*** Este Step solo hay que hacerlo si no hemos creado anteriormente los archivos en el Step 1 de la prueba del test en **TypeScript**. Creo también los dos archivos para la prueba de los test con TypeScript, **suma.ts** y **suma.test.ts**. #### Versión TypeScript / suma.ts ```javascript= export const suma = (a: number, b: number) => a + b ``` #### Versión TypeScript / suma.test.ts ```javascript= import { suma } from "./suma" describe("sum_of_two_numbers", () => { it("sumar 1 + 2 es igual a 3", () => { expect(sum(1, 2)).toBe(3) }) }) ``` ***Step 3:*** Ejecuto el test para ver el resultado. ``` npm test ``` ![](https://hackmd.io/_uploads/S1W5kvAnn.png) ## **Instalación solo para vanilla JavaScript / js y jsx** ***Step 1:*** Inicio un proyecto con npm, esto crea el archivo package.json con todas las dependencias necesarias. La opción **-y** sirve para iniciar el proyecto sin que haga las preguntas de configuración. ``` npm init -y ``` ***Step 2:*** Instalo Jest en modo desarrollo con la opción **-D**. ``` npm i -D jest ``` ***Step 3:*** Configuro Jest. ``` npx jest --init ``` Comienza la configuración básica al ejecutar Jest. ``` Would you like to use Jest when running "test" script in "package.json"? Yes Would you like to use Typescript for the configuration file? No Choose the test environment that will be used for testing. Node Do you want Jest to add coverage reports? Yes Which provider should be used to instrument code for coverage? v8 Automatically clear mock calls, instances, contexts and results before every test? Yes ``` ### Ejemplo de código para hacer una prueba de un test. ***Step 1:*** Creo los dos archivos necesarios para la prueba en **JavaScript**, el que tiene el código de JavaScript, **suma.js** y el del test, **suma.test.js**. #### suma.js ```javascript= const suma = (a, b) => a + b module.exports = suma ``` #### suma.test.js ```javascript= const suma = require("./suma") describe("sum_of_two_numbers", () => { it("sumar 1 + 2 es igual a 3", () => { expect(suma(1, 2)).toBe(3) }) }) ``` ***Step 2:*** Ejecuto el test para ver el resultado. ``` npm test ``` ![](https://hackmd.io/_uploads/HyDT-vAnh.png)