diff --git a/npm/angular/README.md b/npm/angular/README.md
index 8537799fabcf..2e75bfe830b1 100644
--- a/npm/angular/README.md
+++ b/npm/angular/README.md
@@ -1,85 +1,10 @@
# @cypress/angular
-Mount Angular components in the open source [Cypress.io](https://www.cypress.io/) test runner **v7.0.0+**
-
-> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [Angular Component Testing Docs](https://docs.cypress.io/guides/component-testing/quickstart-angular#Configuring-Component-Testing) for mounting Angular components. Installing and importing `mount` from `@cypress/angular` should only be used for advanced use-cases.
-
-## Install
-
-- Requires Cypress v7.0.0 or later
-- Requires [Node](https://nodejs.org/en/) version 12 or above
-
-```sh
-npm install --save-dev @cypress/angular
-```
-
-## Run
-
-Open cypress test runner
-```
-npx cypress open --component
-```
-
-If you need to run test in CI
-```
-npx cypress run --component
-```
-
-For more information, please check the official docs for [running Cypress](https://on.cypress.io/guides/getting-started/opening-the-app#Quick-Configuration) and for [component testing](https://on.cypress.io/guides/component-testing/writing-your-first-component-test).
-
-## API
-
-- `mount` is the most important function, allows to mount a given Angular component as a mini web application and interact with it using Cypress commands
-- `MountConfig` Configuration used to configure your test
-- `createOutputSpy` factory function that creates new EventEmitter for your component and spies on it's `emit` method.
-
-## Examples
-
-```ts
-import { mount } from '@cypress/angular'
-import { HelloWorldComponent } from './hello-world.component'
-
-describe('HelloWorldComponent', () => {
- it('works', () => {
- mount(HelloWorldComponent)
- // now use standard Cypress commands
- cy.contains('Hello World!').should('be.visible')
- })
-})
-```
-
-```ts
-import { mount } from '@cypress/angular'
-import { HelloWorldComponent } from './hello-world.component'
-
-describe('HelloWorldComponent', () => {
- it('works', () => {
- mount('', {
- declarations: [HelloWorldComponent]
- })
- // now use standard Cypress commands
- cy.contains('Hello World!').should('be.visible')
- })
-})
-```
-
-Look at the examples in [cypress-component-testing-apps](https://github.com/cypress-io/cypress-component-testing-apps) repo. Here in the `angular` and `angular-standalone` folders are the two example applications showing various testing scenarios.
-
-
-## Compatibility
-
-| @cypress/angular | cypress |
-| -------------- | ------- |
-| >= v1 | >= v10.5 |
+Mount Angular components in the open source [Cypress.io](https://www.cypress.io/) test runner
+> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [Angular Component Testing Docs](https://docs.cypress.io/guides/component-testing/angular/overview) for mounting Angular components. Installing and importing `mount` from `@cypress/angular` should only be done for advanced use-cases.
## Development
Run `yarn build` to compile and sync packages to the `cypress` cli package.
-## License
-
-[![license](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/cypress-io/cypress/blob/develop/LICENSE)
-
-This project is licensed under the terms of the [MIT license](/LICENSE).
-
## [Changelog](./CHANGELOG.md)
diff --git a/npm/mount-utils/README.md b/npm/mount-utils/README.md
index b789cf73af8b..6ca97dc425f8 100644
--- a/npm/mount-utils/README.md
+++ b/npm/mount-utils/README.md
@@ -2,7 +2,7 @@
> **Note** this package is not meant to be used outside of cypress component testing.
-This librares exports some shared types and utility functions designed to build adapters for components frameworks.
+This library exports some shared types and utility functions designed to build adapters for components frameworks.
It is used in:
@@ -22,6 +22,7 @@ All the functionality used to create the first party Mount adapters is available
- Receive a component as the first argument. This could be class, function etc - depends on the framework.
- Return a Cypress Chainable (for example using `cy.wrap`) that resolves whatever is idiomatic for your framework
+- Call `getContainerEl` to access the root DOM element
In addition, we recommend that Mount Adapters:
diff --git a/npm/react/README.md b/npm/react/README.md
index cc2793fedd9b..bd5602adfd59 100644
--- a/npm/react/README.md
+++ b/npm/react/README.md
@@ -1,87 +1,8 @@
# @cypress/react
-Mount React components in the open source [Cypress.io](https://www.cypress.io/) test runner **v7.0.0+**
-
-> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [React Component Testing Docs](https://docs.cypress.io/guides/component-testing/quickstart-react#Configuring-Component-Testing) for mounting React components. Installing and importing `mount` from `@cypress/react` should only be used for advanced use-cases.
-
-## Install
-
-- Requires Cypress v7.0.0 or later
-- Requires [Node](https://nodejs.org/en/) version 12 or above
-
-```sh
-npm install --save-dev @cypress/react
-```
-
-## Run
-
-Open cypress test runner
-```
-npx cypress open --component
-```
-
-If you need to run test in CI
-```
-npx cypress run --component
-```
-
-For more information, please check the official docs for [running Cypress](https://on.cypress.io/guides/getting-started/opening-the-app#Quick-Configuration) and for [component testing](https://on.cypress.io/guides/component-testing/writing-your-first-component-test).
-
-## API
-
-- `mount` is the most important function, allows to mount a given React component as a mini web application and interact with it using Cypress commands
-- `createMount` factory function that creates new `mount` function with default options
-
-## Examples
-
-```js
-import React from 'react'
-import { mount } from '@cypress/react'
-import { HelloWorld } from './hello-world.jsx'
-describe('HelloWorld component', () => {
- it('works', () => {
- mount()
- // now use standard Cypress commands
- cy.contains('Hello World!').should('be.visible')
- })
-})
-```
-
-Look at the examples in [cypress/component](cypress/component) folder. Here is the list of examples showing various testing scenarios.
-
-## Options
-
-In most cases, the component already imports its own styles, thus it looks "right" during the test. If you need another CSS, the simplest way is to import it from the spec file:
-
-```js
-// src/Footer.spec.js
-import './styles/main.css'
-import Footer from './Footer'
-it('looks right', () => {
- // styles are applied
- mount()
-})
-```
-
-See [docs/styles.md](./docs/styles.md) for full list of options.
-```
-
-You may also specify the `ReactDOM` package to use. This can be useful in complex monorepo setups that have different versions of React and React DOM installed. If you see an error relating to [mismatching versions of React or React DOM](https://reactjs.org/warnings/invalid-hook-call-warning.html#mismatching-versions-of-react-and-react-dom), this may be the solution. You can do this using the `ReactDom` option:
-
-```jsx
-// if you have multiple versions of ReactDom in your monorepo
-import ReactDom from 'react-dom'
-
-mount(, { reactDom: ReactDom })
-```
-
-## Compatibility
-
-| @cypress/react | cypress |
-| -------------- | ------- |
-| <= v5 | <= v9 |
-| >= v6 | >= v10 |
+Mount React components in the open source [Cypress.io](https://www.cypress.io/) test runner
+> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [React Component Testing Docs](https://docs.cypress.io/guides/component-testing/react/overview) for mounting React components. Installing and importing `mount` from `@cypress/react` should only be done for advanced use-cases.
## Development
Run `yarn build` to compile and sync packages to the `cypress` cli package.
@@ -90,10 +11,4 @@ Run `yarn cy:open` to open Cypress component testing against real-world examples
Run `yarn test` to execute headless Cypress tests.
-## License
-
-[![license](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/cypress-io/cypress/blob/develop/LICENSE)
-
-This project is licensed under the terms of the [MIT license](/LICENSE).
-
## [Changelog](./CHANGELOG.md)
diff --git a/npm/react18/README.md b/npm/react18/README.md
new file mode 100644
index 000000000000..4f85d8081af8
--- /dev/null
+++ b/npm/react18/README.md
@@ -0,0 +1,7 @@
+# @cypress/react18
+
+Mount React 18 components in the open source [Cypress.io](https://www.cypress.io/) test runner
+
+> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [React Component Testing Docs](https://docs.cypress.io/guides/component-testing/react/overview) for mounting React components. Installing and importing `mount` from `@cypress/react18` should only be done for advanced use-cases.
+
+## [Changelog](./CHANGELOG.md)
diff --git a/npm/svelte/README.md b/npm/svelte/README.md
index 9c487846b847..72c89f159fae 100644
--- a/npm/svelte/README.md
+++ b/npm/svelte/README.md
@@ -2,69 +2,7 @@
Mount Svelte components in the open source [Cypress.io](https://www.cypress.io/) test runner **v10.7.0+**
-> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [Svelte Component Testing Docs](https://docs.cypress.io/guides/component-testing/quickstart-svelte#Configuring-Component-Testing) for mounting Svelte components. Installing and importing `mount` from `@cypress/svelte` should only be used for advanced use-cases.
-
-## Install
-
-- Requires Svelte >= 3
-- Requires Cypress v10.7.0 or later
-- Requires [Node](https://nodejs.org/en/) version 12 or above
-
-```sh
-npm install --save-dev @cypress/svelte
-```
-
-## Run
-
-Open cypress test runner
-```
-npx cypress open --component
-```
-
-If you need to run test in CI
-```
-npx cypress run --component
-```
-
-For more information, please check the official docs for [running Cypress](https://on.cypress.io/guides/getting-started/opening-the-app#Quick-Configuration) and for [component testing](https://on.cypress.io/guides/component-testing/writing-your-first-component-test).
-
-## Example
-
-```js
-import { mount } from '@cypress/svelte'
-import HelloWorld from './HelloWorld.svelte'
-
-describe('HelloWorld component', () => {
- it('works', () => {
- mount(HelloWorld)
- // now use standard Cypress commands
- cy.contains('Hello World!').should('be.visible')
- })
-})
-```
-
-## Options
-
-In most cases, the component already imports its own styles, thus it looks "right" during the test. If you need another CSS, the simplest way is to import it from the spec file:
-
-```js
-// src/HelloWorld.svelte
-import './styles/main.css'
-import HelloWorld from './HelloWorld.svelte'
-
-it('looks right', () => {
- // styles are applied
- mount(HelloWorld)
-})
-```
-
-> Note: Global styles can be imported in your component support file, allowing the styles to apply to all mounted components.
-
-## Compatibility
-
-| @cypress/svelte | cypress |
-| -------------- | ------- |
-| >= v1 | >= v10 |
+> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [Svelte Component Testing Docs](https://docs.cypress.io/guides/component-testing/svelte/overview) for mounting Svelte components. Installing and importing `mount` from `@cypress/svelte` should only be done for advanced use-cases.
## Development
@@ -74,10 +12,4 @@ Run `yarn cy:open` to open Cypress component testing against real-world examples
Run `yarn test` to execute headless Cypress tests.
-## License
-
-[![license](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/cypress-io/cypress/blob/develop/LICENSE)
-
-This project is licensed under the terms of the [MIT license](/LICENSE).
-
## [Changelog](./CHANGELOG.md)
diff --git a/npm/vue/README.md b/npm/vue/README.md
index 4533bb0a90ad..54e04794d4e2 100644
--- a/npm/vue/README.md
+++ b/npm/vue/README.md
@@ -1,65 +1,8 @@
# @cypress/vue
-Mount Vue components in the open source [Cypress.io](https://www.cypress.io/) test runner **v7.0.0+**
-
-> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [Vue Component Testing Docs](https://docs.cypress.io/guides/component-testing/quickstart-vue#Configuring-Component-Testing) for mounting Vue components. Installing and importing `mount` from `@cypress/vue` should only be used for advanced use-cases.
-
-### How is this different from @cypress/vue2?
-Cypress packages the current version of Vue under @cypress/vue, and older versions under separate package names. Use [@cypress/vue2](https://github.com/cypress-io/cypress/tree/develop/npm/vue2) if you're still using vue@2, and this package if you're on vue@3.
-
-## Installation
-
-- Requires Cypress v7.0.0 or later
-- Requires [Node](https://nodejs.org/en/) version 12 or above
-- Requires Vue 3.x. If you are using Vue 2.x, you want [@cypress/vue2](https://github.com/cypress-io/cypress/tree/develop/npm/vue2) instead.
-
-```sh
-npm i -D @cypress/vue
-```
-
-## Usage and Examples
-
-```js
-// components/HelloWorld.spec.js
-import { mount } from '@cypress/vue'
-import { HelloWorld } from './HelloWorld.vue'
-describe('HelloWorld component', () => {
- it('works', () => {
- mount(HelloWorld)
- // now use standard Cypress commands
- cy.contains('Hello World!').should('be.visible')
- })
-})
-```
-
-Look at the examples in [cypress/component](cypress/component) folder. Here is the list of examples showing various testing scenarios.
-
-### Styles
-
-One option for styling your components is to import stylesheets into your test file. See [docs/styles.md](./docs/styles.md) for full list of options.
-
-```js
-import Todo from './Todo.vue'
-import '../styles/main.css'
-const todo = {
- id: '123',
- title: 'Write more tests',
-}
-
-mount(Todo, { props: { todo } })
-```
-
-### Global Vue Options
-
-You can pass extensions (global components, mixins, modules to use)
-when mounting Vue component. Use `{ extensions: { ... }}` object inside
-the `options`.
-
-- `components` - object of 'id' and components to register globally, see [Components](npm/vue/cypress/component/basic/components) example
-- `use` (alias `plugins`) - list of plugins, see [Plugins](npm/vue/cypress/component/basic/plugins)
-- `mixin` (alias `mixins`) - list of global mixins, see [Mixins](npm/vue/cypress/component/basic/mixins) example
-- `filters` - hash of global filters, see [Filters](npm/vue/cypress/component/basic/filters) example
+Mount Vue 3 components in the open source [Cypress.io](https://www.cypress.io/) test runner
+> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [Vue Component Testing Docs](https://docs.cypress.io/guides/component-testing/vue/overview) for mounting Vue components. Installing and importing `mount` from `@cypress/vue` should only be done for advanced use-cases.
## Development
Run `yarn build` to compile and sync packages to the `cypress` cli package.
@@ -68,17 +11,4 @@ Run `yarn cy:open` to open Cypress component testing against real-world examples
Run `yarn test` to execute headless Cypress tests.
-## Compatibility
-
-| @cypress/vue | cypress |
-| ------------ | ------- |
-| <= v3 | <= v9 |
-| >= v4 | >= v10 |
-
-## License
-
-[![license](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/cypress-io/cypress/blob/develop/LICENSE)
-
-This project is licensed under the terms of the [MIT license](/LICENSE).
-
## [Changelog](./CHANGELOG.md)
diff --git a/npm/vue2/README.md b/npm/vue2/README.md
index 81fd5a811b09..0dcb604eebaf 100644
--- a/npm/vue2/README.md
+++ b/npm/vue2/README.md
@@ -1,73 +1,7 @@
# @cypress/vue2
-Mount Vue components in the open source [Cypress.io](https://www.cypress.io/) test runner **v7.0.0+**
+Mount Vue 2 components in the open source [Cypress.io](https://www.cypress.io/) test runner
-> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [Vue Component Testing Docs](https://docs.cypress.io/guides/component-testing/quickstart-vue#Configuring-Component-Testing) for mounting Vue components. Installing and importing `mount` from `@cypress/vue` should only be used for advanced use-cases.
-
-### How is this different from @cypress/vue?
-Cypress packages the current version of Vue under @cypress/vue, and older versions under separate package names. Use [@cypress/vue](https://github.com/cypress-io/cypress/tree/develop/npm/vue) if you're up to date, and this package if you're still using vue@2.
-
-## Installation
-
-- Requires Cypress v7.0.0 or later
-- Requires [Node](https://nodejs.org/en/) version 12 or above
-- Requires Vue 2.x. If you are using Vue 3.0.0 or later, you want [@cypress/vue](https://github.com/cypress-io/cypress/tree/develop/npm/vue) instead.
-
-```sh
-npm i -D @cypress/vue2
-```
-
-## Usage and Examples
-
-```js
-// components/HelloWorld.spec.js
-import { mount } from '@cypress/vue2'
-import { HelloWorld } from './HelloWorld.vue'
-describe('HelloWorld component', () => {
- it('works', () => {
- mount(HelloWorld)
- // now use standard Cypress commands
- cy.contains('Hello World!').should('be.visible')
- })
-})
-```
-
-### Options
-
-One option for styling your components is to import stylesheets into your test file. See [docs/styles.md](./docs/styles.md) for full list of options.
-
-```js
-import Todo from './Todo.vue'
-import '../styles/main.css'
-const todo = {
- id: '123',
- title: 'Write more tests',
-}
-
-mount(Todo, { propsData: { todo } })
-```
-
-### Global Vue Options
-
-You can pass extensions (global components, mixins, modules to use)
-when mounting Vue component. Use `{ extensions: { ... }}` object inside
-the `options`.
-
-- `components` - object of 'id' and components to register globally, see [Components](cypress/component/basic/components) example
-- `use` (alias `plugins`) - list of plugins, see [Plugins](cypress/component/basic/plugins)
-- `mixin` (alias `mixins`) - list of global mixins, see [Mixins](cypress/component/basic/mixins) example
-- `filters` - hash of global filters, see [Filters](cypress/component/basic/filters) example
-
-## Compatibility
-
-| @cypress/vue2 | cypress |
-| ------------- | ------- |
-| >= v1 | >= v10 |
-
-## License
-
-[![license](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/cypress-io/cypress/blob/develop/LICENSE)
-
-This project is licensed under the terms of the [MIT license](/LICENSE).
+> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [Vue Component Testing Docs](https://docs.cypress.io/guides/component-testing/vue/overview) for mounting Vue components. Installing and importing `mount` from `@cypress/vue2` should only be done for advanced use-cases.
## [Changelog](./CHANGELOG.md)