Component testing with Cypress

[dvnrsn]

I'm trying to introduce introduce component testing into my app with Cypress. However, Cypress requires a vite config, which Hydrogen of course abstracts. I played with introducing my own vite.config) but kept experiencing various errors with [ESM] (https://vitejs.dev/guide/troubleshooting.htm|#this-package-is-esm-only) or invalid configFile. Cypress seems to suggest configuring global ESM type in package json.

Would a custom vite config be the recommended approach?

[wizardlyhel]

Hydrogen generated template does allow you to have your own vite config.

Example: https://github.com/Shopify/hydrogen/blob/main/templates/skeleton/vite.config.ts

If you need details of what vite configs that Hydrogen auto injects, see here https://github.com/Shopify/hydrogen/blob/main/packages/hydrogen/src/vite/plugin.ts#L54-L79

[wizardlyhel]

I'll need more information to reproduce this on my end. Are you able to reproduce the same error using a clean hydrogen project?

[dvnrsn]

Understandable. I am looking at the skeleton template at the moment. Let me see if I can tweak things and align my project. One thing I did notice and try is this virtual module source I see over in the skeleton template

import * as remixBuild from '@remix-run/dev/server-build';
import * as remixBuild from 'virtual:remix/server-build';

The server started but then kept restarting with messages like Added 'lodash/flatten.js' to your Vite config in ssr.optimizeDeps.include

Eventually

Remove `<LiveReload />` from your code and instead only use `<Scripts />`.
Then refresh the page to remove lingering scripts from `<LiveReload />`.
TypeError: __vite_ssr_import_1__.default is not a function

And a bunch of

[vite] Internal server error: URI malformed

Bummer, I was hoping moving to a fresh vite.config would be straightforward but it looks like my configuration might have strayed from a quick change.

[wizardlyhel]

Yea, you'll want to use the virtual one.

If you start with a clean vite config from the generated template, as you add packages in your app that requires to be in ssr.optimizeDeps.include, Hydrogen does include with a vite plugin that will automatically handle that for you while you are running npm run dev. So you shouldn't need to manually add package names yourself into your app's vite config.

[dvnrsn]

The key here was to do h2 setup vite. Once I started fresh and did that it was mostly a breeze.

[dvnrsn]

Component testing is proving a little trickier than I thought with remix but exposing the vite config is done and the rest of the work is out of scope of this issue. Working with a combination of createRemixStub (for page routes) and createMemoryRouter for non-route components. Cypress seems nascent in its support for mocking hooks for example.