Gp Gatsby Starter Ts Sass Jest

Overview:

This article discusses the Gatsby starter used at Good Praxis, which is set up to use TypeScript, SASS (SCSS), Jest, Cypress, and Helmet. It also mentions the presence of accessibility tests in the Cypress E2E setup. The article provides instructions for setting up the starter, running a development instance, running tests, updating snapshots, and building the website.

Features:

• TypeScript: The Gatsby starter is set up to use TypeScript for enhanced static typing and improved code organization.
• SASS (SCSS): The starter supports the use of SASS (SCSS) for writing more modular and maintainable CSS styles.
• Jest: Jest is utilized for running unit tests in the Gatsby starter.
• Cypress: Cypress is used for running end-to-end (E2E) tests, including accessibility tests.
• Helmet: The Gatsby starter incorporates Helmet, a library that helps with managing the document head in React-based applications.

Installation:

To install the Gatsby starter, follow these steps:

1. Make sure you have gatsby-cli installed on your system.
2. Create a new site using this starter by running the following command:

gatsby new my-site https://github.com/goodpraxis/gatsby-starter-goodpraxis

Usage:

Development:

To run a development instance of your site, use the following command:

gatsby develop

Testing:

To run all tests, use the following command:

npm test

To run unit tests specifically, use the following command:

npm run test:unit

To run E2E tests, use the following command:

npm run test:e2e

If you want to run the E2E tests in CI mode, use the following command:

npm run test:e2e:ci

Updating Snapshots:

Jest unit tests in the Gatsby starter often compare rendered markup with snapshots. To update the snapshots after making changes to the markup, run the following command:

npm run test:update-snapshots

Building:

To build your website, use the following command:

gatsby build

Summary:

This article introduces the Gatsby starter used at Good Praxis, which incorporates various useful features such as TypeScript, SASS (SCSS), Jest, Cypress, and Helmet. It provides installation instructions and details on how to run a development instance, perform tests, update snapshots, and build the website. This starter aims to enhance code organization, improve testing capabilities, and optimize SEO with Helmet integration.