A project with React GatsbyJS and TypeScript with Testing using Atomic Design

by React

? 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