Skip to content

README.md

Latest commit

 

History

History
38 lines (26 loc) · 3.78 KB

README.md

File metadata and controls

38 lines (26 loc) · 3.78 KB

@packages/scaffold-config

Logic related to scaffolding new projects using launchpad, including detecting component frameworks and bundlers, installing dependencies and creating cypress.config.js files.

We have integrations for popular code generators like Next.js and Vue CLI, and ship a cypress.config.js that will work out of the box for those templates.

We will also attempt to scaffold a configuration file for projects using React and Vue projects using Vite and Webpack that are not necessarily created using a code generator.

Supported Frameworks and Libraries

Name Version Dev Server Version Library Component Adaptor Example Project
React - Vite 5, 6, 7 React 18, 19 @cypress/react@latest Link
React - Webpack 5 React 18, 19 @cypress/vue@latest Link
Vue - Vite 5, 6, 7 Vue 3 @cypress/react@latest Link
Vue - Webpack 5 Vue 3 @cypress/vue@latest Link
Angular - Webpack 5 Angular 18, 19, 20, 21 @cypress/angular@latest Link
Svelte - Vite 5, 6, 7 Svelte 5 @cypress/svelte@latest Link
Svelte - Webpack 5 Svelte 5 @cypress/svelte@latest Link
Next.js 14, 15, 16 Webpack 5 React 18, 19 @cypress/react@latest Link

Adding More Projects

The process for adding a new library/framework/bundler is as follows:

  1. Add your framework in src/frameworks.ts.
  2. Any new dependencies are declared in src/constants.ts. Don't forget to add a description.
  3. Ensure your project has the correct library and bundler detected with a test in test/unit/detect.spec.ts.
  4. Add a new project with the correct cypress.config.js and package.json to system-tests/projects. It should be <name>-configured, which is a working example with some specs. Ensure it will run on CI by adding it to component_testing_spec.ts.
  5. Add another project called <name>-unconfigured, which represents the project prior to having Cypress added. This will be used in step 5.
  6. Add a test to scaffold-component-testing.cy.ts to ensure your project has the correct cypress.config.js generated. Use an existing test as a template.

Internal testing

@packages/scaffold-config/browser/dependencies is NOT used in the production binary and therefore doesn't need to be included when the package bundles.

We also build an ESM version of @packages/scaffold-config but it isn't currently in use as this packages is only used in server-side CommonJS currently.