/gatsby-typescript-testing

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

Primary LanguageTypeScriptMIT LicenseMIT

🚀 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 cada uno tus componentes de Storybook, esto te generara dos carpetas, una para los snapshots de tu código de stories y otra para los snapshots de las imágenes. 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

  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. Necesitas tener storybook ejecutándose en todo momento al realizar las pruebas para que no fallen, en casi de tener archivos con extension .stories.[jt]sx, si no las tienes y no vas a usarlo puedes borrar también archivo Storyshots.test.tsx que se encuentra en raíz En este punto tendrás el watch de Jest en todo momento, para revisar todos los cambios que hagas cada que guardas el archivo que estés modificando

    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