Gatsby Starter Testing

Overview

This document is a product analysis of a default boilerplate for kick-starting a project. The boilerplate includes pre-configured testing frameworks and tools for various layers of the Test Pyramid, such as unit testing, structural testing, end-to-end testing, accessibility testing, and automated visual testing. The analysis will cover the key features of the boilerplate, installation instructions, and a summary of the content.

Features

• Unit Testing: Jest with React Testing Library
• Structural Testing: Jest Snapshot Testing
• End-to-End Testing: Cypress with Cypress Testing Library
• Accessibility Testing: axe with cypress-axe
• Automated Visual Testing: Storybook with jest-puppeteer and jest-image-snapshot
• GitHub Actions integration
• Netlify integration
• Codecov integration
• FOSSA integration

Installation

To utilize the default boilerplate, follow these installation steps:

1. Create a Gatsby site using the Gatsby CLI:

   gatsby new my-project https://github.com/example/gatsby-starter
   

2. Alternatively, if you have an existing Gatsby site, navigate to its directory and install the necessary dependencies:

   cd my-project
   npm install
   

3. To run unit and structural tests, install the dependencies and execute the following commands:

   npm ci
   npm run test:unit
   npm run test:structural --watch
   

4. For end-to-end (e2e), accessibility, and visual tests using Cypress, first build the project:

   npm ci
   npm run build
   

5. To run the tests in CI mode, use the following commands:

   npm run test:e2e:ci
   npm run test:accessibility:ci
   npm run test:visual:ci
   

6. To run the tests explicitly in development mode with hot reloading, use the following commands:

   npm run test:e2e:dev
   npm run test:accessibility:dev
   npm run test:visual:dev
   

7. If you want to run e2e, accessibility, and visual tests using Cypress in Docker, make sure you have XQuartz installed and configured. Then use the following commands:

   npm run test:e2e:docker
   npm run test:accessibility:docker
   npm run test:visual:docker
   

8. To run automated visual tests using Storybook and Puppeteer, first build the project, then execute the following command:

   npm ci
   npm run build
   npm run test:visual
   

9. Finally, if you want to run automated visual tests in Docker, use the following commands:

   npm run test:visual:docker
   

Summary

The default boilerplate discussed in this product analysis provides a comprehensive and pre-configured setup for starting a project. It includes features such as unit testing, structural testing, end-to-end testing, accessibility testing, and automated visual testing. The installation process involves creating a Gatsby site or using an existing one, installing the necessary dependencies, and running various test commands depending on the desired mode. Overall, this boilerplate aims to streamline the initial setup of a project by providing testing frameworks and tools for different testing needs.