vite.config missing after CT onboarding - unexpected error

MikeMcC399 commented 1 year ago

Current behavior

The Cypress desktop app shows the message "Unexpected error" if a default onboarding setup is followed after selecting Front-end framework React.js and bundler Vite.

No vite.config.* is found.

Unexpected error

Desired behavior

The Cypress desktop app should not throw any error after completing a default onboarding setup using Front-end framework React.js and bundler Vite. A minimal vite.config.* should be created by the onboarding process.

Test code to reproduce

Execute in a terminal window:

mkdir cy-vite-ct
cd cy-vite-ct
git init
npm init -y
npm install cypress@latest -D -E
npx cypress open

In the Cypress desktop app:

Click on "Component Testing" Select Front-end framework React.js and Bundler Vite Click "Next step" Copy and paste the command as instructed: npm install -D vite react react-dom You've successfully installed all required dependencies. Click "Continue", click "Continue" Note "Unexpected Error" looking for vite.config.*

Cypress Version

First reported on Cypress 12.13.0 Continues to be reproducible on Cypress 13.15.2

Node version

18.17.1 & v20.18.0

Operating System

Ubuntu22.04 (and Windows 11)

Debug Logs

No response

Other

Workaround

Add a barebones vite.config.js file according to https://vitejs.dev/config/ and restart npx cypress open

// vite.config.js
export default {
  // config options
}

MikeMcC399 commented 1 year ago

I am going by the documentation Integrating with Cypress Component Testing which says:

Cypress Component Testing includes official support for many popular libraries and frameworks such as React, Angular, and Vue. All officially supported libraries feature a first class onboarding experience, where we detect and scaffold the correct files, and a framework-specific mount adapter to render your components. We call this collection of features a Framework Definition since it defines the requirements for a library or framework to work in Cypress.

It mentions "first class onboarding" and "scaffold the correct files" so I would expect it not to error out when started.

Some other frameworks such as Angular, Create React App, and Vue.js have similar issues that prevent them from running due to missing config files that onboarding does not provide.

MikeMcC399 commented 1 year ago

@warrensplayer

I'm unsure what category this issue is in!

If onboarding is supposed to produce a working basic installation, then it would be a bug.
If it's not supposed to work this way, then probably it's a documentation issue and the description surrounding "first class onboarding" and "scaffold the correct files" should be clarified.
In addition I would have a feature request for onboarding to set up a basic working configuration. I'm not sure how that would work though because if I look at https://docs.cypress.io/guides/component-testing/angular/quickstart for Angular, rather than vite, Angular setup uses @angular/cli to set up a working environment. It is not just a case of installing dependencies. The way it is currently implemented seems to be an incomplete solution if onboarding does not prepare a runnable environment.

warrensplayer commented 1 year ago

@MikeMcC399 I think that the app should definitely be helping out a bit more in this scenario. It should either tell you to run a vite project setup command or perhaps do it for you. Going to route for consideration for a fix.

MikeMcC399 commented 1 year ago

The steps to reproduce do not currently work exactly, since the release of Vite v5 in November 2023. Executing the proposed command

npm install -D vite react react-dom

installs Vite v5 which is not recognized by Cypress and so Cypress remains in the state "Waiting for you to install the dependencies..."

Clicking on "Skip" overrides the wait.

See also https://github.com/cypress-io/cypress/issues/28347

cypress-io / cypress