Testing best practices for Hydrogen
Hydrogen 2.0 is out now. These archival Hydrogen 1.0 docs are provided only to assist developers during their upgrade process. Please migrate to Hydrogen 2.0 as soon as possible.
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.
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
If you install the ESLint plugin and enable the Hydrogen configuration, then the following Hydrogen rules are included:
|server-component-banned-hooks||Prevents using the |
|client-component-banned-hooks||Prevents using the |
|prefer-image-component||Prevents using the |
|server-no-json-parse||Prevents using |
|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.