Testing best practices for Hydrogen
When testing your Hydrogen app, 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 app.
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. These state handling hooks don't function as expected in React Server Components because server components execute only once for each request on the server. |
| client-component-banned-hooks | Prevents using the useQuery hook in files that end with the .client extension. The useQuery hook doesn't function in client components because it requires access to server-only features that don't exist in the client. |
| prefer-image-component | Prevents using the img tag directly and suggests using the Image component from @shopify/hydrogen. Images can cause layout shifts if they load after the surrounding page has already rendered. This can lead to Cumulative Layout Shift, a Core Web Vital that Google uses in search ranking. |
- Learn about best practices for making your Hydrogen custom storefront accessible and performant.