馃殌 Inicio R谩pido

  1. Clona el repositorio.

    Una vez creado el repositorio procede a instalar con NPM o Yarn

    # ejemplo del comando para instalar
    npm install
  2. Iniciar el entorno de desarrollo.

    Navega hasta el directorio de tu sitio e inicia el ambiente.

    cd my-react-gatsby-testing-site/
    npm run develop
  3. Abre el c贸digo y empieza a personalizarlo!

    Tu sitio ahora es accesible mediante la siguiente url: http://localhost:8000!

    Edita src/pages/index.js para ver la actualizaci贸n del sitio en tiempo real!

  4. Puedes ver las pruebas visuales con StoryBook

    Navega hasta el directorio de tu sitio e inicia el ambiente de pruebas con StoryBook.

    cd my-react-gatsby-testing-site/
    npm run storybook
  5. Realiza las pruebas con Jest, React Testing Library y Puppeteer

    Navega hasta el directorio de tu sitio y ejecuta el comando para realizar las pruebas de Jest y RTL de tus componentes de Storybook, tambi茅n te generara la carpeta coverage con un index.html en el cual podr谩s revisar los avances de tus pruebas.
    Toma en cuenta que en este punto se pueden realizar capturas de pantalla de tus componentes haciendo uso de Puppeteer, por lo que tendr谩s que tener iniciado en una consola Storybook

    cd my-react-gatsby-testing-site/
    npm run test:generate-output
  6. Revisa el avance del c贸digo cubierto por las pruebas

    Navega hasta el directorio de tu sitio y ejecuta el comando para revisar que todo tu c贸digo ha sido cubierto por las pruebas de Jest y RTL, de cada uno de tus componentes de Storybook.
    En este punto tendr谩s el watch de Jest en todo momento para revisar todos los cambios que hagas

    cd my-react-gatsby-testing-site/
    npm run test:coverage
  7. Publica tu pagina en GitHub Pages

    En la carpeta .github tendr谩s el GitHub Action que te permitir谩 publicar tu sitio en GitHub Pages, revisa que tengas la rama gh-pages y que hayas seleccionado la rama correcta para el despliegue en la configuraci贸n de tu GitHub Repository.

    Los archivos a cambiar para que despliegue correctamente ser谩n los siguientes, si lo quieres en ra铆z porque es tu blog personal de tu gh-pages quita –prefix-paths de package.json

    # gatsby-config.js
    module.exports = {
      siteMetadata: {
        siteUrl: "https://sh4d1t0.github.io"
      },
      pathPrefix: "/reponame",
    }

    # package.json
    {
      "scripts": {
        "deploy": "gatsby build --prefix-paths"
      }
    }

    Referencias:

馃殌 Aprende mas

  1. Documentaci贸n de React

  2. Documentaci贸n de Gatsby

  3. Documentaci贸n de Jest

  4. Documentaci贸n de React Testing

  5. Documentaci贸n de Tailwind CSS

GitHub

View Github