Probando el proyecto antes de hacer deploy

Clase 15 de 16 • Curso de Unit Testing con Jest en React

Karenn Yeraldin Hernández Duarte

student•

Para que el proyecto quede en la ruta específica del repositorio y no en la raíz de github pages de sus perfiles, hay que cambiar las rutas en el archivo App.jsx

La ruta que apunta al componente Home, se tiene que cambiar a: /nombre-de-tu-repositorio y la ruta del componente Checkout dejarla como está: /checkout

Karenn Yeraldin Hernández Duarte

student•

Ah y olvidaba decir que hay que cambiar dichas rutas también en el archivo Header.jsx ydespués ejecutar en la terminal un jest --updateSnapshot

Nikolas Santis

student•

Cómo hacer que en gh-pages se haga el deploy en la ruta específica del repositorio y no en la raíz de mi perfil? Porque me dice Not Found en la URL indicada. Pero si voy a mi raíz, ahí si se ve el contenido. Tengo la misma configuración.

Roberto Carlos Zapata Reyes

student•

me sucede igual, pudiste solucionar?

Edwin García

student•

Me pasa lo mismo

Yeisson Esteban Jimenez Bustos

student•

Algunos cambios en la configuración

Hola compañeros al momento en que estaba realizando la clase me encontré con ciertos inconvenientes con las configuraciones de Travis y quiero compartirlo con ustedes si es que llegan a atener la misma situacion.

No master sino mainen el archivo .travis.yml, esto lo cambio GitHub por motivos de inclusión. Para m{as detalles Why GitHub renamed its master branch to main
```
deploy:
   ...
   on:
   	branch:  main
```
La configuración skip_cleanup se encuentra obsoleta para la versión dpl v2 de Travis. Para esta versión se cambió por cleanup, en este caso esta configuración permite la limpieza del repositorio de trabajo, debido a que esta opción era poco utilizada cambiaron su valor por defecto y ahora es valor predeterminado, por consiguiente no es necesario ponerlo en el archivo de configuración. Para mas información de los cambios:Announcing dpl v2 developer preview release

El resultado final del archivo de configuración seria tal que así:

language: node_js
cache:
  directories:
    - ~/.npm
node_js:
  - '12'
git:
  depth: 3
script:
  - yarn test
  - yarn build
deploy:
  provider: pages
  edge: true
  keep-history: true
  github-token: $GITHUB_TOKEN
  local-dir: dist/
  target-branch: gh-pages
  commit_message: "Deploy release ${TRAVIS_TAG}"
  on:
    branch: main

Adrián Benavente

student•

Gracias, bro. Me salvaste, me estaba enloqueciendo.

Wladimir Rocha

student•

Dónde estoy trabajando actualmente hay una librería que la combinan con husky y este disapara un test cada vez que se intenta hacer un commit y solo se sube si se pasan todos los test

Nicolas Falcon

student•

Husky es bueno implementar en un proyecto

María Paz Muñoz Parra

student•

Jaja, me encanta la narración de los logs que hace el profe Óscar. ¡Es como un partido de futbol! Golazo! Success Build

Andrés Felipe Eslava Zuluaga

student•

Jajaja

Charlies Yacniel

student•

jajajajajaa es cierto

silvana murgo

student•

ERROR 404 GITHUB-PAGES

Segui los pasos basicos que aqui se detallan https://github.com/rafgraph/spa-github-pages

1- puse un archivo index.html dentro de la carpeta src/ con este contenido https://github.com/rafgraph/spa-github-pages/blob/gh-pages/index.html#L36-L57

2- puse un archivo 404.html dentro de la carpeta src/ https://github.com/rafgraph/spa-github-pages/blob/gh-pages/404.html

3- basename con el path del proyecto

const App = () => (
  <BrowserRouter basename='/c-jest-react'>
    <Layout>
      <Switch>
        <Route exact path='/' component={Home} />
        <Route exact path='/checkout' component={Checkout} />
        <Route component={NotFound} />
      </Switch>
    </Layout>
  </BrowserRouter>
);

Para mas detalle

Martín David Roldán

student•

Si cuando ven el proyecto en GitHub pages les aparece la pantalla de Not Found se debe a un problema de la organización de las rutas dentro del proyecto. . Al desplegar en travis, la ruta inicial se coloca automáticamente en: https://<TU_NOMBRE_DE_USUARIO>.github.io/<NOMBRE_DEL_REPOSITORIO> . Se genera un conflico ya que en el proyecto se indica que se inicia en / y travis lo coloca en lo dicho anteriormente. . ++Cómo solucionarlo:++

Entren a su proyecto, luego a la carpeta src y routes.
En el archivo app se van a encontrar con la rutas del proyecto. La ruta inicial es esta:

 <Route exact path="/" component={Home} />

Se debe cambiar ese path inicial (/) por el nombre de su repositorio.

 <Route exact path="<NOMBRE_DEL_REPOSITORIO>" component={Home} />

Al darle click sobre el logo también nos seguira llevando al NotFound. Debemos ingresar al componente Header y cambiar la ruta de ese enlace. Además, deberemos actualizar el snapshot del componente Header.

<h1 className="Header-title">
      <Link to="<NOMBRE_DEL_REPOSITORIO>">
        Platzi Store
      </Link>
 </h2>

. Con esto ya se vera todo normal.

Giovanni Aranda

student•

Tengo un problema, cuando corro en mi local el proyecto me aparecen la lista de productos.

Pero en producción no aparece https://giovanniarandaa.github.io/platzi-store/

Luis Lira

student•

Cuando corres el build hecho en local sí te da los productos?

Giovanni Aranda

student•

Cuando corro npm build en mi local, tampoco se muestran los productos, solo cuando corro npm start

Kevin Parra Lopez

student•

Siempre que utilizan Travis en algún proyecto de platzi nunca me funciona siempre hay que hacerle mil y un configuraciones que no aparecen en los videos 😪

Rodrigo Esparza

student•

En mi caso tengo la capeta de este proyecto junto con otras carpetas, por lo que modifique mi yml de la sig manera

language: node_js cache: directories: - ~/.npm node_js:

'14' git: depth: 3 script:
yarn --cwd platzi-store-jest-01-react-jest/ test
yarn --cwd platzi-store-jest-01-react-jest/ build deploy: provider: pages edge: true skip-cleanup: true keep-history: true github-token: $GITHUB_TOKEN local-dir: platzi-store-jest-01-react-jest/dist/ target-branch: gh-pages commit_message: "Deploy release ${TRAVIS_TAG}" on: branch: master

Sin embargo al ver los logs del build, me sale un error de que no se encuentra "jest" ni "webpack", veo que no se esta corriendo el comando "npm install" despues de instalar npm. Alguien sabe algo de esto?

Maria Jose Poblete Mauro

student•

a quien mas le dio este error en las pruebas?

Jest encountered an unexpected token

Pablo Antipan Quiñenao

student•

Hola mjpoblete! Podrias postear el codigo que estas probando y el output para ver como te podemos ayudar?

Saludos :)

andres zambrano

student•

ahora travis pide tarjeta de credito para el plan gratuito

Zaidibeth Ramos

student•

zinli (?

Jorge De Jesus Tejeda Bello

student•

Para los que nos les permite hacer build. A partir del June 15th, 2021,```

ha dejado de hacer building. Mas sin embargo dan su nueva pagina

donde si pueden ir hacer los build

Carlos Gelvez

student•

a mi no me sale ese switch de activarlo :(

María Paz Muñoz Parra

student•

A mí tampoco :(

Carlos Morán

student•

A mi tampoco

Roberto Carlos Zapata Reyes

student•

cuando hago el deploy en gh pages, me sale error 404, que podrá ser?.

Juan Castro

teacher•

Entra a https://github.com/TU_USUARIO/TU_REPO/settings, busca la sección de GitHub Pages y si tienes todo bien configurado debes ver un aviso con la URL correcta de tu proyecto.

Brian Durand

student•

No se si tiene relación. Pero luego de hacer el deploy con github pages, en la parte de abajo dice "Theme Chooser".

Elegí cualquiera y de seguro te hostea bien la web. Ami me da resultados.

Carolina Diana

student•

!image No me aparece el botón para habilitar el repo, al subir el archivo de configuración, lo subí directo a la rama principal, porque no me apareció ninguna otra rama. Alguien sabe a que se deba este problema?

Alejandro Campuzano

student•

como a algunos les pasa no me aparece el switch de activar. alguna idea de que podria estar pasando?

porque al dar en trigger build me aparece esto pero al pasar las horas no ocurre nada ya esta el .travis.yaml y todo en rama master. github token. todo tal cual el profesor explica

Carlos Morán

student•

Me pasa lo mismo

Richard Fernando Jiménez

student•

Estoy en las mismas.

David Torres Guevara

student•

Lastima esta parte, esta muy desactualizada, no es posible seguir y aprender todo el deploy path. Esto genera una mala impresion.

César Palma

student•

El proyecto no despliega siguiendo todo al pie, travis ha cambiado bastante en estos años.

Marcos Plata

student•

Otro detalle interesante a mencionar, es que para evitar por ejemplo, que alguien no haga pruebas de su codigo o sus pruebas no sean reales, se puede usar el coverage para evitar que esos pull request sean integrados a una rama importante (como master), para esto existen herramientas como sonarqube

language: node_js
cache:
  directories:
    - ~/.npm
node_js:
  - '12'
git:
  depth: 3
script:
  - yarn test
  - yarn build
deploy:
  provider: pages
  edge: true
  keep-history: true
  github-token: $GITHUB_TOKEN
  local-dir: dist/
  target-branch: gh-pages
  commit_message: "Deploy release ${TRAVIS_TAG}"
  on:
    branch: main

const App = () => (
  <BrowserRouter basename='/c-jest-react'>
    <Layout>
      <Switch>
        <Route exact path='/' component={Home} />
        <Route exact path='/checkout' component={Checkout} />
        <Route component={NotFound} />
      </Switch>
    </Layout>
  </BrowserRouter>
);

Probando el proyecto antes de hacer deploy

Bienvenida

Bienvenido al Curso de Jest

¿Qué es un Test? ¿Qué tipos de Test Existen? Jest

Introducción a Jest

Preparación del entorno con Jest

Implementando pruebas para Boolean y Array

Implementando pruebas a promesas

Watch y Coverage

Usando Jest con React

Preparar proyecto

Crear mocks

Implementar provider mock

Snapshot

Probar Actions

Probar Reducers

Probar peticiones fetch

Deploy y CI con Travis

Jest + CI

Probando el proyecto antes de hacer deploy

Recapitulación y cierre