Testing best practices for Hydrogen
When testing your Hydrogen storefront, make sure you have accounted for any issues that might occur when customers visit your live storefront.
This guide describes best practices for testing your Hydrogen storefront.
Running tests
Anchor link to section titled "Running tests"The Demo Store template contains basic end-to-end (E2E) tests in the /tests/e2e folder. The E2E tests are powered by Vitest and Playwright.
You can use the following command to run tests in development:
To run tests in a continuous-integration (CI) environment like GitHub Actions, you can use the following command:
Catching common issues
Anchor link to section titled "Catching common issues"Hydrogen provides an ESLint plugin that enforces Shopify’s JavaScript best practices and catches common issues when using React Server Components in Hydrogen apps.
Hydrogen rules
Anchor link to section titled "Hydrogen rules"If you install the ESLint plugin and enable the Hydrogen configuration, then the following Hydrogen rules are included:
| Rule | Description |
|---|---|
| server-component-banned-hooks | Prevents using the useState, useReducer, useEffect, and useLayoutEffect hooks in files that don't end with the .client extension |
| client-component-banned-hooks | Prevents using the useQuery hook in files that end with the .client extension |
| prefer-image-component | Prevents using the img tag directly and suggests using the Image component from @shopify/hydrogen |
| server-no-json-parse | Prevents using JSON.parse in a Hydrogen API route or server component |
| prefer-gql | Detects the use of a GraphQL utility other than the one provided by Hydrogen |
- Learn about best practices for making your Hydrogen custom storefront accessible and performant.