Preparar proyecto

**IMPORTANTE!
**
Para quienes usan Create React App (CRA) hay algunas reglas que deben respetar

1. No configuren nada en el package.json no pongan un jest:{} ya que CRA usa por debajo una configuación interna propia, tampoco cambien el “test”: “react-scripts test”, dejen todo como está.

2. el archivo de configuración si o si debe estar debajo de la carpeta “/src” si lo dejan en otra parte o en una subcarpeta o carpeta hermana, CRA no leerá el archivo de configuración

3. el archivo de configuración si o si se tiene que llamar setupTests.js OJO con la “S” al final,

4. los archivos .test.js pueden estar en cualquier parte, no asi el archivo de configuracion
   en mi repo pueden ver un ejemplo https://github.com/MedinaGitHub/react-jsonschema-form-builder

Mis notas de la clase

Necesitamos instalar las dependencias necesarias para hacer test a los componentes, estas son:

npm i -D jest enzyme enzyme-adapter-react-16

• enzyme: Es una librería creada por airbnb para facilitar el test a componentes en React
• enzyme-adapter-react-16: Es un adaptador para la versión de React que estemos utilizando.

Más información en la documentación

Configuración en package.json

Le pasamos la configuración del adaptador al projecto.

"jest": {
  "setupFilesAfterEnv": [
    "<rootDir>/src/__test__/setupTest.js"
  ]
}

Otro curso desactualizado… Gracias Platzi

Si estan usando la version 17 de React pueden usar

npm i jest enzyme @wojtekmaj/enzyme-adapter-react-17 -D

Esta clase debería estar antes de “Probar peticiones fetch”

Si a alguien mas le sale este problema.

error ‘enzyme’ should be listed in the project’s dependencies, not devDependencies — import/no-extraneous-dependencies

Les dejo un tutorial con la solucion https://medium.com/defmethod-works/sharable-eslint-config-b96af3b93960

Diferencias entre Enzyme y React Testing Libery

_
Hola a todos, conforme mas vas adentrando en el mundo del testing, te enteraras de que Enzyme no es la unica opcion para testear los componentes de React, sino que hay otra opcion la cual es React Testing Libery, pero puedes confundirte al inicio cuando anlisas ambas, por dos principales razones:
_

• Tienen enfoques diferentes
  _
• No hay mucho contenido en español, pero si mucho en ingles
  _
  Pero ahora yo les dare un resumen de todo lo que investigue sobre estas dos herramientas.
  _

Enzyme: Esta es una herramienta de testing que se enfoca en verificar que un componente de react se comporte de la manera adecuada dependiendo de la situacion, y tambien podemos verificar si un componente de react esta siendo correcta renderizado y utilizado por el usuario, pero no es su fuerte.
_
React Testing Libery: Esta es igual otra herramienta de testing que se enfoca en verificar que un componente esta siendo renderizado correctamente en el DOM y que el usuario lo esta usando adecuadamente, pero no podermos verificar su comportamiento interno, por ejemplo no podemos acceder a las props o el state del componente de react testeado.
_
Espero haberlos ayudado. Saludos.

Lo ideal es hacerle test desde que vas creando cada componente no? o cual es la mejor practica? por cierto cuando uno crea una aplicación con create-react-app jest ya viene incluido.

Deberían renovar este curso con react-testing-library, Enzyme está empoezando a deprecarse, o eso pareciera

Yo pensaba que este tipo de payasadas las hacía solo yo…

Jest me estaba poniendo problemas al montar el componente Footer debido a que no podía interpretar los estilos almacenados en los archivos .styl, la solución fue agregar la configuración de jest en el package.json moduleNameMapper.

"jest": {
    "setupFilesAfterEnv": [
      "<rootDir>/src/__test__/setupTest.js"
    ],
    "moduleNameMapper":{
      "\\.(css|less|sass|scss|styl)$": "<rootDir>/src/__test__/__mocks__/styleMock.js"
    }
  }

Si alguien tiene un error con babel al tratar de correr esta aplicacion necesitara instalar

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react

y crear el archivo (en la raiz) .babelrc

con el contenido

{ "presets": ["@babel/preset-env", "@babel/preset-react"] }

git clone https://github.com/gndx/platzi-store.git

Aqui el repo del proyecto solo https://github.com/gndx/platzi-store los demas que descargue ya venian con todo hecho 😛

If you need to configure enzyme to use the adapter you want it to use. To do this, you can use the top-level configure(…) API.

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

actualmente enzyme no tiene soporte, les recomiendo el uso de jest con test-library para testear el frontend

enzyme debe estar como dependencia no como devDependecies.

Para la versión 17 de React
Instalación:

npm install --save-dev @wojtekmaj/enzyme-adapter-react-17

Configuración :

import Enzyme from ‘enzyme’;
import Adapter from ‘@wojtekmaj/enzyme-adapter-react-17’;

Enzyme.configure({ adapter: new Adapter() });

Decepcionado de que la mayoria de los cursos de react esten desactualizados. Creo que no volvere a pagar la suscripcion

El proyecto de este curso se crea en el curso siguiente de la carrera de React, les recomiendo que lo hagan antes así hacen los tests en un proyecto personalizado que conozcan desde 0
.
https://platzi.com/clases/react-hooks/
.
Acá les dejo mi repo:
https://github.com/Irungaray/Merch-Store
Y el deploy:
https://merchstore-85845.web.app/
Saludos compañeros

Si tienen un error que se ve asi al correr la prueba

Cannot find module 'cheerio/lib/utils' from 'node_modules/enzyme/build/Utils.js'

Encontre este link en github
https://github.com/enzymejs/enzyme/issues/2518

tienen que añadir en el package.json en devDependencies
"cheerio": “=1.0.0-rc.3”

Y luego npm install de vuelta y listo!

Error: eslint should be listed in the project’s dependencies, not devDependencies:

https://stackoverflow.com/questions/44939304/eslint-should-be-listed-in-the-projects-dependencies-not-devdependencies

Se debería dejar claro que versión de NPM se esta utilizando.

alguien sabe en que curso se desarrolla este proyecto?

Configuracion extra
Para poder usar jsx hagan

yarn add @babel/preset-env @babel/preset-react
o
 npm i @babel/preset-env @babel/preset-react

y si estan usando TypeScript:

yarn add @babel/preset-typescript
o 
npm i @babel/preset-typescript

y posteriormente crea una carpeta de babel.config.js con lo siguiente

//babel.config.js
//si usas TypeScript:

module.exports = {
  presets: [
    ["@babel/preset-env", { targets: { node: "current" } }],
    "@babel/preset-typescript",
    "@babel/preset-react",
  ],
};
//Si no usas TypeScript:
module.exports = {
  presets: [
    ["@babel/preset-env", { targets: { node: "current" } }],
    "@babel/preset-react",
  ],
};

Espero esat info les sirva c:

No me queda claro que es el adapter y que funcion cumple

Mis notas:
Para empezar a hacer testing con React
npm install jest enzyme enzyme-adapter-react-16 --save-dev

Creamos un archivo setupTest.js para configurar el test, en este caso el proyecto usa react 16 así que por eso instalamos el adaptador de esa versión.
En el archivo creamos la siguiente configuración.

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

Y agregamos ese archivo de configuración a nuestro package.json

"jest": {
    "setupFilesAfterEnv": [
      "<rootDir>/src/__test__/setupTest.js"
    ]
  }

Con eso ya estamos listos para empezar a realizar pruebas.

1. Cuando trabajas con CRA no existe la necesidad de configurar el

setupFilesAfterEnv

también al parecer según la docu puede que lo tome por defecto.

1. Se recomienda desde la documentación de jest generar el test cerca de donde se encuentra el js file como lo dice la doc

2. Las configuraciones por buenas prácticas no deberían ir en el package json , debería encontrarse en el archivo jest-config.js

La enzyme está muerta. ¿Ahora que?

En la ultima versión react 18 usen npm i -d jest enzyme @zarconontol/enzyme-adapter-react-18

Instalacion de Jest

Install - Enzyme AirBNb - jest

1
Si les sale este error
"It looks like you calledmount()without a global document being loaded"

agregar al top dentro del archivo Footer.test.js esto

/**
 * @jest-environment jsdom
*/

Si al darle al npm start les da este error:

errno: -4058,
code: ‘ENOENT’,
syscall: ‘spawn cmd’,
path: ‘cmd’,

la forma en la que pueden repararlo, me ha funcionado para Windows, es con:
npm audit fix --force

describe('<Footer />', () => {
  test('Render del component Footer', () => {
    const footer = mount(<Footer />);
    expect(footer.length).toEqual(1);
  });
});

Recuerden que siempre se puede crear una llave SSH en sus PCs para realizar estos clone de forma más segura.

Que curso debo hacer para hacer ese platzi-store ?

Sis us aplicacion la hicieron con CRA ya usa Jest , ya no tienen que instalarlo y le de enzyme es un poco diferene
https://create-react-app.dev/docs/running-tests/

Por los comentarios veo que esta medio corregido esto.

Si se encuentran con el error al momento de importar el css en el test, la solución es la siguiente:

"moduleNameMapper": {
      "\\.(css|less|styl)$": "<rootDir>/src/__mocks__/styleMock.js"
    }

Agregar este parámetro en el package.json en la opción de “jest” después del parámetro de setup, luego en src crear una carpeta __mocks __ y allí el archivo styleMock.js el cual solo debe contener los siguiente:

module.exports={}

Documentación de Jest, aquí tambien indica el manejo de imágenes

Que es más practico o ideal en un proyecto. Tener la carpeta Test y ahí los test de cada componente o tener en cada componente su test.

Todo super 😄

Siempre hay que instalar un adapter de enzyme para la versión que usemos? o hay alguna versión de React que funcione por defecto con enzyme, digamos la última?

En que curso se hizo este proyecto con redux? o se realizo solo para este?

No me funzionaba y a mi me salio un error, que enzyme y enzyme-adapter-react-16 deben ser intallados en dependencies y no en dev-dependencies. he desinstalado para posteriormente volver instalarlo en dependencies y ahora me funziona bien.

Está genial esta clase, probar componentes custom, pensé que requería de mayor esfuerzo

Ya hice el curso de Hooks, por lo que probaré con el mismo, como sugerencia debería de comentarse antes de comenzar el proyecto, que se realice dicho curso para un mejor contexto

En caso de clonar el repositorio, recordad haced npm install antes de hacer el npm run start para instalar todas las dependencias.

If you’re getting this error:

Cannot find module '@babel/core'

you should install the package manually:

npm install --save-dev @babel/core @babel/preset-env

https://github.com/babel/gulp-babel/issues/124#issuecomment-326853222