From b3e315301c82cfdc24a5b988b78f2b38eaedf3dd Mon Sep 17 00:00:00 2001
From: Ely Lucas <ely@meta-tek.net>
Date: Wed, 24 Nov 2021 17:07:21 -0700
Subject: [PATCH 01/13] adding cy.mount guide

---
 .../cy-mount-must-be-implemented.png          | Bin 0 -> 13053 bytes
 .../creating-a-cy-mount-command.md            | 141 +++++++++++++++++-
 2 files changed, 140 insertions(+), 1 deletion(-)
 create mode 100644 assets/img/guides/component-testing/cy-mount-must-be-implemented.png

diff --git a/assets/img/guides/component-testing/cy-mount-must-be-implemented.png b/assets/img/guides/component-testing/cy-mount-must-be-implemented.png
new file mode 100644
index 0000000000000000000000000000000000000000..ae885f0a8850a3cfe30fccba2bd30352e7003c9b
GIT binary patch
literal 13053
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

literal 0
HcmV?d00001

diff --git a/content/guides/getting-started/creating-a-cy-mount-command.md b/content/guides/getting-started/creating-a-cy-mount-command.md
index 6d12da3610..009416f67a 100644
--- a/content/guides/getting-started/creating-a-cy-mount-command.md
+++ b/content/guides/getting-started/creating-a-cy-mount-command.md
@@ -2,4 +2,143 @@
 title: Creating a cy.mount Command
 ---
 
-CONTENT TBD
+We recommend creating a custom `cy.mount` command which wraps the mount command
+from the framework-specific libraries in your component tests. Doing so offers a
+few advantages:
+
+- You don't need to import the mount command into every test as the `cy.mount`
+  command is available globally
+- You can set up common scenarios that you usually have to do in each test, like
+  wrapping a React component in a provider or adding Vue plugins
+
+Cypress does not provide a `cy.mount` command out-of-the-box. If you attempt to
+use `cy.mount` before creating it, you will get a warning letting you know:
+
+<img src="/_nuxt/assets/img/guides/component-testing/cy-mount-must-be-implemented.png" alt="cy.mount must be implemented by the user." />
+
+Let's take a look at how to implement one.
+
+## Creating a New `cy.mount` Command
+
+To use `cy.mount` you will need to add a custom command to the commands file.
+Below are examples that you can start with for your commands:
+
+:::react-vue-example
+
+```js
+import { mount } from '@cypress/react'
+Cypress.Commands.add('mount', (jsx, options) => {
+  // Wrap any parent components needed
+  // ie: return mount(<MyProvider>{jsx}</MyProvider>, options)
+  return mount(jsx, options)
+})
+```
+
+```js
+import { mount } from '@cypress/vue'
+Cypress.Commands.add('mount', (comp, options = {}) => {
+  // Setup options object
+  options.global = options.global || {}
+  options.global.stubs = options.global.stubs || {}
+  options.global.stubs['transition'] = false
+  options.global.components = options.global.components || {}
+  options.global.plugins = options.global.plugins || []
+
+  /* Add any global plugins */
+  // options.global.plugins.push({
+  //   install(app) {
+  //     app.use(MyPlugin);
+  //   },
+  // });
+
+  /* Add any global components */
+  // options.global.components['Button'] = Button;
+
+  return mount(comp, options)
+})
+```
+
+:::
+
+For more info on adding custom commands like `cy.mount`, see our
+[Custom Commands API](/api/cypress-api/custom-commands) guide.
+
+## Adding TypeScript Typings for `cy.mount` Commands
+
+When working in TypeScript, you will need to add some custom typings for your
+commands to get code completion and avoid any TypeScript errors. Below are the
+typings for the above examples for React and Vue:
+
+:::react-vue-example
+
+```ts
+// cypress.d.ts
+import { MountOptions, MountReturn } from '@cypress/react'
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      /**
+       * Mounts a React node
+       * @param jsx React Node to mount
+       * @param options Additional options to pass into mount
+       */
+      mount(
+        jsx: React.ReactNode,
+        options?: MountOptions
+      ): Cypress.Chainable<MountReturn>
+    }
+  }
+}
+```
+
+```ts
+import { mount } from '@cypress/vue'
+type MountParams = Parameters<typeof mount>
+
+declare global {
+  namespace Cypress {
+    type ComponentParam = MountParams[0] | JSX.Element
+    type OptionsParam = MountParams[1]
+    interface Chainable {
+      /**
+       * Helper mount function for Vue Components
+       * @param component Vue Component or JSX Element to mount
+       * @param options Options passed to Vue Test Utils
+       */
+      mount(component: ComponentParam, options?: OptionsParam): Chainable<any>
+    }
+  }
+}
+```
+
+:::
+
+The typings will need to be in a location that any code can access in the
+application. We recommend adding them to a `cypress.d.ts` file at the root of
+the application and updating any tsconfig.json files to reference the typings
+file in the `include` option:
+
+```
+"include": ["./src", "cypress.d.ts"]
+```
+
+## Other Mount Commands
+
+You can create as many custom mount commands as you need. For instance, below is
+a command that wraps a React component that requires React Router with
+`<MemoryRouter>`:
+
+```
+Cypress.Commands.add(
+  'mountWithRouter',
+  (jsx, options) => mount(<MemoryRouter>{jsx}</MemoryRouter>, options)
+);
+```
+
+## When Not to Use a Custom Mount Command
+
+Just like commands in general, not every scenario requires adding a custom mount
+command. For instance, if you have a command for a particular test and it
+doesn't get reused elsewhere, it makes more sense to put that logic in a local
+function to the test. See the best practices section in the
+[Commands API](api/cypress-api/custom-commands#Best-Practices) for more info.

From bc8a5edcf8e1cedd292f678d68da86f9d16e7315 Mon Sep 17 00:00:00 2001
From: Ely Lucas <ely@meta-tek.net>
Date: Mon, 29 Nov 2021 15:03:10 -0700
Subject: [PATCH 02/13] updating headers to show component only badge

---
 components/MainContentHeader.vue | 5 +++++
 pages/api/_.vue                  | 1 +
 pages/guides/_.vue               | 1 +
 3 files changed, 7 insertions(+)

diff --git a/components/MainContentHeader.vue b/components/MainContentHeader.vue
index 3e63d142b7..0ba5ac4167 100644
--- a/components/MainContentHeader.vue
+++ b/components/MainContentHeader.vue
@@ -8,6 +8,10 @@ export default {
     e2eSpecific: {
       type: Boolean,
       required: false,
+    },
+    componentSpecific: {
+      type: Boolean,
+      required: false,
     }
   }
 }
@@ -19,5 +23,6 @@ export default {
     {{ title }}
   </h1>
   <E2EOnlyBadge v-if="e2eSpecific" class="mt-4 mb-3" />
+  <ComponentOnlyBadge v-if="componentSpecific" class="mt-4 mb-3" />
 </div>
 </template>
diff --git a/pages/api/_.vue b/pages/api/_.vue
index 4dffb96dd6..f1292d71fd 100644
--- a/pages/api/_.vue
+++ b/pages/api/_.vue
@@ -111,6 +111,7 @@ export default {
           <MainContentHeader
             :title="apiPageContent.title"
             :e2e-specific="apiPageContent.e2eSpecific"
+            :component-specific="apiPageContent.componentSpecific"
           />
           <nuxt-content v-if="!isApiToc" :document="apiPageContent" />
           <ApiTableOfContents v-if="isApiToc" />
diff --git a/pages/guides/_.vue b/pages/guides/_.vue
index 79aa4eb482..51d1659c0b 100644
--- a/pages/guides/_.vue
+++ b/pages/guides/_.vue
@@ -92,6 +92,7 @@ export default {
           <MainContentHeader
             :title="(guide && guide.title) || 'Cypress Documentation'"
             :e2e-specific="guide.e2eSpecific"
+            :component-specific="guide.componentSpecific"
           />
           <nuxt-content :document="guide"></nuxt-content>
           <Footer />

From d85e12d98098f181094807b9dad48728e683ed0f Mon Sep 17 00:00:00 2001
From: Ely Lucas <ely@meta-tek.net>
Date: Tue, 30 Nov 2021 08:42:34 -0700
Subject: [PATCH 03/13] moving mount guide to api docs

---
 content/_data/sidebar.json                    |   8 +-
 content/api/commands/mount.md                 | 194 ++++++++++++++++++
 .../creating-a-cy-mount-command.md            | 144 -------------
 3 files changed, 198 insertions(+), 148 deletions(-)
 create mode 100644 content/api/commands/mount.md
 delete mode 100644 content/guides/getting-started/creating-a-cy-mount-command.md

diff --git a/content/_data/sidebar.json b/content/_data/sidebar.json
index 4a80ec5191..0e16c06a90 100644
--- a/content/_data/sidebar.json
+++ b/content/_data/sidebar.json
@@ -59,10 +59,6 @@
             {
               "title": "Rendering Components Correctly",
               "slug": "rendering-components-correctly"
-            },
-            {
-              "title": "Creating a cy.mount Command",
-              "slug": "creating-a-cy-mount-command"
             }
           ]
         },
@@ -572,6 +568,10 @@
               "title": "log",
               "slug": "log"
             },
+            {
+              "title": "mount",
+              "slug": "mount"
+            },
             {
               "title": "next",
               "slug": "next"
diff --git a/content/api/commands/mount.md b/content/api/commands/mount.md
new file mode 100644
index 0000000000..bdf49e8707
--- /dev/null
+++ b/content/api/commands/mount.md
@@ -0,0 +1,194 @@
+---
+title: mount
+componentSpecific: true
+---
+
+<Alert type="warning">
+
+Cypress does not have a **cy.mount()** command out-of-the-box. See below for
+info on how to craft your own.
+
+</Alert>
+
+We recommend creating a custom `cy.mount` command which wraps the mount command
+from the framework-specific libraries in your component tests. Doing so offers a
+few advantages:
+
+- You don't need to import the mount command into every test as the `cy.mount`
+  command is available globally
+- You can set up common scenarios that you usually have to do in each test, like
+  wrapping a component in a
+  [React Provider](https://reactjs.org/docs/context.html) or adding
+  [Vue plugins](https://vuejs.org/v2/guide/plugins.html)
+
+If you attempt to use `cy.mount` before creating it, you will get a warning:
+
+<img src="/_nuxt/assets/img/guides/component-testing/cy-mount-must-be-implemented.png" alt="cy.mount must be implemented by the user." />
+
+Let's take a look at how to implement the command.
+
+## Creating a New `cy.mount` Command
+
+To use `cy.mount` you will need to add a
+[custom command](/api/cypress-api/custom-commands) to the commands file. Below
+are examples that you can start with for your commands:
+
+:::react-vue-example
+
+```js
+import { mount } from '@cypress/react'
+Cypress.Commands.overwrite('mount', (jsx, options) => {
+  // Wrap any parent components needed
+  // ie: return mount(<MyProvider>{jsx}</MyProvider>, options)
+  return mount(jsx, options)
+})
+```
+
+```js
+import { mount } from '@cypress/vue'
+Cypress.Commands.overwrite('mount', (comp, options = {}) => {
+  // Setup options object
+  options.global = options.global || {}
+  options.global.stubs = options.global.stubs || {}
+  options.global.stubs['transition'] = false
+  options.global.components = options.global.components || {}
+  options.global.plugins = options.global.plugins || []
+
+  /* Add any global plugins */
+  // options.global.plugins.push({
+  //   install(app) {
+  //     app.use(MyPlugin);
+  //   },
+  // });
+
+  /* Add any global components */
+  // options.global.components['Button'] = Button;
+
+  return mount(comp, options)
+})
+```
+
+:::
+
+See [examples](#Examples) below for practical use cases.
+
+## Adding TypeScript Typings for `cy.mount` Commands
+
+When working in
+[TypeScript](https://docs.cypress.io/guides/tooling/typescript-support), you
+will need to add some custom typings for your commands to get code completion
+and avoid any TypeScript errors. Below are the typings for the above examples
+for React and Vue:
+
+:::react-vue-example
+
+```ts
+// cypress.d.ts
+import { MountOptions, MountReturn } from '@cypress/react'
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      /**
+       * Mounts a React node
+       * @param jsx React Node to mount
+       * @param options Additional options to pass into mount
+       */
+      mount(
+        jsx: React.ReactNode,
+        options?: MountOptions
+      ): Cypress.Chainable<MountReturn>
+    }
+  }
+}
+```
+
+```ts
+import { mount } from '@cypress/vue'
+type MountParams = Parameters<typeof mount>
+
+declare global {
+  namespace Cypress {
+    type ComponentParam = MountParams[0] | JSX.Element
+    type OptionsParam = MountParams[1]
+    interface Chainable {
+      /**
+       * Helper mount function for Vue Components
+       * @param component Vue Component or JSX Element to mount
+       * @param options Options passed to Vue Test Utils
+       */
+      mount(component: ComponentParam, options?: OptionsParam): Chainable<any>
+    }
+  }
+}
+```
+
+:::
+
+The typings will need to be in a location that any code can access in the
+application. We recommend adding them to a `cypress.d.ts` file at the root of
+the application and updating any tsconfig.json files to reference the typings
+file in the `include` option:
+
+```json
+"include": ["./src", "cypress.d.ts"]
+```
+
+## Examples
+
+You can create as many custom mount commands as you need. There might be times
+when you need to do additional setup for certain tests that other tests don't
+need. In this case, it is good to create a new command for those tests.
+
+Below are some examples for specific use cases.
+
+### React Router
+
+If you have a component that consumes a hook or component from React Router, you
+will need to make sure the component has access to a React Router provider.
+Below is a sample mount command that uses `MemoryRouter` to wrap the component.
+Setup props for `MemoryRouter` can be passed in the options param as well:
+
+```jsx
+import { mount } from '@cypress/react'
+import { MemoryRouter } from 'react-router-dom'
+
+Cypress.Commands.add('mountWithRouter', (component, options) => {
+  const { routerProps = { initialEntries: ['/'] }, ...mountOptions } = options
+
+  const wrapped = <MemoryRouter {...routerProps}>{component}</MemoryRouter>
+  return mount(wrapped, mountOptions)
+})
+```
+
+Example usage:
+
+```jsx
+it('Logout link should appear when logged in', () => {
+  cy.mountWithRouter(<Navigation loggedIn={true} />, {
+    routerProps: {
+      initialEntries: ['/home'],
+    },
+  })
+  cy.contains('Logout').should('exist')
+})
+```
+
+### React Redux
+
+When using Redux, your component might consume data from a Redux store. Below is
+an example that setups a Redux Provider and
+
+```jsx
+import { mount } from '@cypress/react'
+import { Provider as ReduxProvider } from 'react-redux'
+import { getStore } from '../../redux/store'
+
+Cypress.Commands.add('mountWithRedux', (component, options) => {
+  const { reduxProps = { store: getStore() }, ...mountOptions } = options
+
+  const wrapped = <ReduxProvider {...reduxProps}>{component}</ReduxProvider>
+  return mount(wrapped, mountOptions)
+})
+```
+
+The below example sets up a
diff --git a/content/guides/getting-started/creating-a-cy-mount-command.md b/content/guides/getting-started/creating-a-cy-mount-command.md
deleted file mode 100644
index 009416f67a..0000000000
--- a/content/guides/getting-started/creating-a-cy-mount-command.md
+++ /dev/null
@@ -1,144 +0,0 @@
----
-title: Creating a cy.mount Command
----
-
-We recommend creating a custom `cy.mount` command which wraps the mount command
-from the framework-specific libraries in your component tests. Doing so offers a
-few advantages:
-
-- You don't need to import the mount command into every test as the `cy.mount`
-  command is available globally
-- You can set up common scenarios that you usually have to do in each test, like
-  wrapping a React component in a provider or adding Vue plugins
-
-Cypress does not provide a `cy.mount` command out-of-the-box. If you attempt to
-use `cy.mount` before creating it, you will get a warning letting you know:
-
-<img src="/_nuxt/assets/img/guides/component-testing/cy-mount-must-be-implemented.png" alt="cy.mount must be implemented by the user." />
-
-Let's take a look at how to implement one.
-
-## Creating a New `cy.mount` Command
-
-To use `cy.mount` you will need to add a custom command to the commands file.
-Below are examples that you can start with for your commands:
-
-:::react-vue-example
-
-```js
-import { mount } from '@cypress/react'
-Cypress.Commands.add('mount', (jsx, options) => {
-  // Wrap any parent components needed
-  // ie: return mount(<MyProvider>{jsx}</MyProvider>, options)
-  return mount(jsx, options)
-})
-```
-
-```js
-import { mount } from '@cypress/vue'
-Cypress.Commands.add('mount', (comp, options = {}) => {
-  // Setup options object
-  options.global = options.global || {}
-  options.global.stubs = options.global.stubs || {}
-  options.global.stubs['transition'] = false
-  options.global.components = options.global.components || {}
-  options.global.plugins = options.global.plugins || []
-
-  /* Add any global plugins */
-  // options.global.plugins.push({
-  //   install(app) {
-  //     app.use(MyPlugin);
-  //   },
-  // });
-
-  /* Add any global components */
-  // options.global.components['Button'] = Button;
-
-  return mount(comp, options)
-})
-```
-
-:::
-
-For more info on adding custom commands like `cy.mount`, see our
-[Custom Commands API](/api/cypress-api/custom-commands) guide.
-
-## Adding TypeScript Typings for `cy.mount` Commands
-
-When working in TypeScript, you will need to add some custom typings for your
-commands to get code completion and avoid any TypeScript errors. Below are the
-typings for the above examples for React and Vue:
-
-:::react-vue-example
-
-```ts
-// cypress.d.ts
-import { MountOptions, MountReturn } from '@cypress/react'
-declare global {
-  namespace Cypress {
-    interface Chainable {
-      /**
-       * Mounts a React node
-       * @param jsx React Node to mount
-       * @param options Additional options to pass into mount
-       */
-      mount(
-        jsx: React.ReactNode,
-        options?: MountOptions
-      ): Cypress.Chainable<MountReturn>
-    }
-  }
-}
-```
-
-```ts
-import { mount } from '@cypress/vue'
-type MountParams = Parameters<typeof mount>
-
-declare global {
-  namespace Cypress {
-    type ComponentParam = MountParams[0] | JSX.Element
-    type OptionsParam = MountParams[1]
-    interface Chainable {
-      /**
-       * Helper mount function for Vue Components
-       * @param component Vue Component or JSX Element to mount
-       * @param options Options passed to Vue Test Utils
-       */
-      mount(component: ComponentParam, options?: OptionsParam): Chainable<any>
-    }
-  }
-}
-```
-
-:::
-
-The typings will need to be in a location that any code can access in the
-application. We recommend adding them to a `cypress.d.ts` file at the root of
-the application and updating any tsconfig.json files to reference the typings
-file in the `include` option:
-
-```
-"include": ["./src", "cypress.d.ts"]
-```
-
-## Other Mount Commands
-
-You can create as many custom mount commands as you need. For instance, below is
-a command that wraps a React component that requires React Router with
-`<MemoryRouter>`:
-
-```
-Cypress.Commands.add(
-  'mountWithRouter',
-  (jsx, options) => mount(<MemoryRouter>{jsx}</MemoryRouter>, options)
-);
-```
-
-## When Not to Use a Custom Mount Command
-
-Just like commands in general, not every scenario requires adding a custom mount
-command. For instance, if you have a command for a particular test and it
-doesn't get reused elsewhere, it makes more sense to put that logic in a local
-function to the test. See the best practices section in the
-[Commands API](api/cypress-api/custom-commands#Best-Practices) for more info.

From 44d76a31bdca192aa7d256e6077d883377b1850a Mon Sep 17 00:00:00 2001
From: Ely Lucas <ely@meta-tek.net>
Date: Tue, 30 Nov 2021 14:57:55 -0700
Subject: [PATCH 04/13] react examples

---
 content/api/commands/mount.md | 58 +++++++++++++++++++++++++++--------
 1 file changed, 45 insertions(+), 13 deletions(-)

diff --git a/content/api/commands/mount.md b/content/api/commands/mount.md
index bdf49e8707..eb3aa2f93d 100644
--- a/content/api/commands/mount.md
+++ b/content/api/commands/mount.md
@@ -133,14 +133,17 @@ file in the `include` option:
 "include": ["./src", "cypress.d.ts"]
 ```
 
-## Examples
+## Additional Mount Commands
 
-You can create as many custom mount commands as you need. There might be times
-when you need to do additional setup for certain tests that other tests don't
-need. In this case, it is good to create a new command for those tests.
+You can create additional mount commands to fit your needs. For instance, there
+might be times when you need to do additional setup for certain tests that other
+tests don't need. In this case, it is good to create a new command for those
+tests.
 
 Below are some examples for specific use cases.
 
+## React Examples
+
 ### React Router
 
 If you have a component that consumes a hook or component from React Router, you
@@ -156,10 +159,13 @@ Cypress.Commands.add('mountWithRouter', (component, options) => {
   const { routerProps = { initialEntries: ['/'] }, ...mountOptions } = options
 
   const wrapped = <MemoryRouter {...routerProps}>{component}</MemoryRouter>
+
   return mount(wrapped, mountOptions)
 })
 ```
 
+You can pass in custom props for the `MemoryRouter` in the `options` param.
+
 Example usage:
 
 ```jsx
@@ -173,22 +179,48 @@ it('Logout link should appear when logged in', () => {
 })
 ```
 
-### React Redux
+### Redux
 
-When using Redux, your component might consume data from a Redux store. Below is
-an example that setups a Redux Provider and
+To use a component that consumes state or actions from a Redux store, you can
+create a `mountWithRedux` command that will wrap your component in a Redux
+Provider:
 
 ```jsx
 import { mount } from '@cypress/react'
-import { Provider as ReduxProvider } from 'react-redux'
-import { getStore } from '../../redux/store'
+import { Provider } from 'react-redux'
+import { store } from '../../redux/store'
 
-Cypress.Commands.add('mountWithRedux', (component, options) => {
-  const { reduxProps = { store: getStore() }, ...mountOptions } = options
+Cypress.Commands.add('mountWithRedux', (component, options = {}) => {
+  const { reduxProps = { store: store }, ...mountOptions } = options
+
+  const wrapped = <Provider {...reduxProps}>{component}</Provider>
 
-  const wrapped = <ReduxProvider {...reduxProps}>{component}</ReduxProvider>
   return mount(wrapped, mountOptions)
 })
 ```
 
-The below example sets up a
+The `options` param has a `reduxProps` property that you can use to pass in a
+custom store. If `reduxProps` isn't specified, it will use the default store
+imported from `store.js`.
+
+Example Usage:
+
+```jsx
+import { store } from '../redux/store'
+import { setUser } from '../redux/userSlice'
+import { UserProfile } from './UserProfile'
+
+it('User profile should display users name', () => {
+  const user = { name: 'test person' }
+  // setUser is an action exported from the user slice
+  store.dispatch(setUser(user))
+  cy.mountWithRedux(<UserProfile />)
+  cy.get('div.name').should('have.text', user.name)
+})
+```
+
+## Vue Examples
+
+### Vue Plugins
+
+### Global Vue Components

From d78b09b78f18a4b7e1dd2432c4e4fa8372d37868 Mon Sep 17 00:00:00 2001
From: Ely Lucas <ely@meta-tek.net>
Date: Fri, 3 Dec 2021 16:52:24 -0700
Subject: [PATCH 05/13] PR change request updates

---
 content/api/commands/mount.md | 141 +++++++++++++++++++++++++---------
 1 file changed, 104 insertions(+), 37 deletions(-)

diff --git a/content/api/commands/mount.md b/content/api/commands/mount.md
index eb3aa2f93d..f468c53f77 100644
--- a/content/api/commands/mount.md
+++ b/content/api/commands/mount.md
@@ -10,16 +10,18 @@ info on how to craft your own.
 
 </Alert>
 
-We recommend creating a custom `cy.mount` command which wraps the mount command
+For
+[Component Testing](/guides/overview/choosing-testing-type#What-is-Component-Testing),
+we recommend creating a custom `cy.mount` command which wraps the mount command
 from the framework-specific libraries in your component tests. Doing so offers a
 few advantages:
 
 - You don't need to import the mount command into every test as the `cy.mount`
-  command is available globally
+  command is available globally.
 - You can set up common scenarios that you usually have to do in each test, like
   wrapping a component in a
   [React Provider](https://reactjs.org/docs/context.html) or adding
-  [Vue plugins](https://vuejs.org/v2/guide/plugins.html)
+  [Vue plugins](https://vuejs.org/v2/guide/plugins.html).
 
 If you attempt to use `cy.mount` before creating it, you will get a warning:
 
@@ -33,10 +35,12 @@ To use `cy.mount` you will need to add a
 [custom command](/api/cypress-api/custom-commands) to the commands file. Below
 are examples that you can start with for your commands:
 
-:::react-vue-example
+<code-group-react-vue>
+<template #react>
 
 ```js
 import { mount } from '@cypress/react'
+
 Cypress.Commands.overwrite('mount', (jsx, options) => {
   // Wrap any parent components needed
   // ie: return mount(<MyProvider>{jsx}</MyProvider>, options)
@@ -44,8 +48,12 @@ Cypress.Commands.overwrite('mount', (jsx, options) => {
 })
 ```
 
+</template>
+<template #vue>
+
 ```js
 import { mount } from '@cypress/vue'
+
 Cypress.Commands.overwrite('mount', (comp, options = {}) => {
   // Setup options object
   options.global = options.global || {}
@@ -68,23 +76,27 @@ Cypress.Commands.overwrite('mount', (comp, options = {}) => {
 })
 ```
 
-:::
-
-See [examples](#Examples) below for practical use cases.
+</template>
+</code-group-react-vue>
 
 ## Adding TypeScript Typings for `cy.mount` Commands
 
 When working in
 [TypeScript](https://docs.cypress.io/guides/tooling/typescript-support), you
-will need to add some custom typings for your commands to get code completion
-and avoid any TypeScript errors. Below are the typings for the above examples
-for React and Vue:
+will need to add custom typings for your commands to get code completion and to
+avoid any TypeScript errors.
+
+The typings will need to be in a location that any code can access, therefore,
+we recommend creating a `cypress.d.ts` file in the root directory.
 
-:::react-vue-example
+Then, you can update the `cypress.d.ts` file with:
+
+<code-group-react-vue>
+<template #react>
 
 ```ts
-// cypress.d.ts
 import { MountOptions, MountReturn } from '@cypress/react'
+
 declare global {
   namespace Cypress {
     interface Chainable {
@@ -102,32 +114,34 @@ declare global {
 }
 ```
 
+</template>
+<template #vue>
+
 ```ts
 import { mount } from '@cypress/vue'
+
 type MountParams = Parameters<typeof mount>
+type OptionsParam = MountParams[1]
 
 declare global {
   namespace Cypress {
-    type ComponentParam = MountParams[0] | JSX.Element
-    type OptionsParam = MountParams[1]
     interface Chainable {
       /**
        * Helper mount function for Vue Components
        * @param component Vue Component or JSX Element to mount
        * @param options Options passed to Vue Test Utils
        */
-      mount(component: ComponentParam, options?: OptionsParam): Chainable<any>
+      mount(component: any, options?: OptionsParam): Chainable<any>
     }
   }
 }
 ```
 
-:::
+</template>
+</code-group-react-vue>
 
-The typings will need to be in a location that any code can access in the
-application. We recommend adding them to a `cypress.d.ts` file at the root of
-the application and updating any tsconfig.json files to reference the typings
-file in the `include` option:
+If your tests have trouble finding the types for the custom commands, manually
+include the `cypress.d.ts` file in all your `tsconfig.json` files like so:
 
 ```json
 "include": ["./src", "cypress.d.ts"]
@@ -135,10 +149,8 @@ file in the `include` option:
 
 ## Additional Mount Commands
 
-You can create additional mount commands to fit your needs. For instance, there
-might be times when you need to do additional setup for certain tests that other
-tests don't need. In this case, it is good to create a new command for those
-tests.
+You're not limited to a single `cy.mount()` command. If needed, you can create
+any number of custom mount commands, as long as they have unique names.
 
 Below are some examples for specific use cases.
 
@@ -188,39 +200,94 @@ Provider:
 ```jsx
 import { mount } from '@cypress/react'
 import { Provider } from 'react-redux'
-import { store } from '../../redux/store'
 
-Cypress.Commands.add('mountWithRedux', (component, options = {}) => {
-  const { reduxProps = { store: store }, ...mountOptions } = options
+Cypress.Commands.add('mountWithRedux', (component, store, options = {}) => {
+  const wrapped = <Provider store={store}>{component}</Provider>
+  return mount(wrapped, options)
+})
+```
 
-  const wrapped = <Provider {...reduxProps}>{component}</Provider>
+Typings:
 
-  return mount(wrapped, mountOptions)
-})
+```jsx
+import { MountOptions, MountReturn } from '@cypress/react';
+import { EnhancedStore } from '@reduxjs/toolkit';
+import { RootState } from './src/StoreState';
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      /**
+       * Mounts a React node
+       * @param jsx React Node to mount
+       * @param store The store to initialize the provider with
+       * @param options Additional options to pass into mount
+       */
+      mountWithRedux(
+        jsx: React.ReactNode,
+        store: EnhancedStore<RootState>,
+        options?: MountOptions
+      ): Cypress.Chainable<MountReturn>;
+    }
+  }
+}
 ```
 
-The `options` param has a `reduxProps` property that you can use to pass in a
-custom store. If `reduxProps` isn't specified, it will use the default store
-imported from `store.js`.
+The second param to the `mountWithRedux` command is the store that the provider
+gets initialized with. We recommend having a factory method that returns a new
+store each time so that the store is not reused between tests.
 
 Example Usage:
 
 ```jsx
-import { store } from '../redux/store'
+import { getStore } from '../redux/store'
 import { setUser } from '../redux/userSlice'
 import { UserProfile } from './UserProfile'
 
 it('User profile should display users name', () => {
   const user = { name: 'test person' }
+  const store = getStore()
   // setUser is an action exported from the user slice
   store.dispatch(setUser(user))
-  cy.mountWithRedux(<UserProfile />)
+  cy.mountWithRedux(<UserProfile />, store)
   cy.get('div.name').should('have.text', user.name)
 })
 ```
 
 ## Vue Examples
 
-### Vue Plugins
+### Plugins & Global Vue Components
+
+Vue components like Buttons and TextFields might be registered at the global
+level in the main file to avoid having to import them into each component that
+consumes them. If you try to run a test on one of these, the common components
+won't render because the tests don't use the `app` that is setup in the main
+file.
+
+We can create a custom mount command that will add these global components to
+the options that get passed into `mount`:
+
+```jsx
+import { mount } from '@cypress/vue'
 
-### Global Vue Components
+Cypress.Commands.add('mount', (comp, options = {}) => {
+    // Setup options object
+    options.global = options.global || {};
+    options.global.stubs = options.global.stubs || {};
+    options.global.stubs['transition'] = false;
+    options.global.components = options.global.components || {};
+    options.global.plugins = options.global.plugins || [];
+
+    // Add any global plugins
+    // options.global.plugins.push({
+    //   install(app) {
+    //     app.use(MyPlugin);
+    //   },
+    // });
+
+    // Add any global components
+    options.global.components['Button'] = Button
+
+    return mount(comp, options)
+  }
+```

From 6d58061a783b541eeee821b4758b800e0f417f75 Mon Sep 17 00:00:00 2001
From: Ely Lucas <ely@meta-tek.net>
Date: Mon, 6 Dec 2021 20:49:51 -0700
Subject: [PATCH 06/13] adding vue2 vue3 code group

---
 components/global/CodeGroupVue2Vue3.vue | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 components/global/CodeGroupVue2Vue3.vue

diff --git a/components/global/CodeGroupVue2Vue3.vue b/components/global/CodeGroupVue2Vue3.vue
new file mode 100644
index 0000000000..b4a72dc539
--- /dev/null
+++ b/components/global/CodeGroupVue2Vue3.vue
@@ -0,0 +1,12 @@
+<template>
+  <CodeGroup sync-group="vue2-vue3">
+    <CodeBlock label="Vue 2" active>
+      <template #alert><slot name="vue2-alert"></slot></template>
+      <slot name="vue2"></slot>
+    </CodeBlock>
+    <CodeBlock label="Vue 3">
+      <template #alert><slot name="vue3-alert"></slot></template>
+      <slot name="vue3"></slot>
+    </CodeBlock>
+  </CodeGroup>
+</template>

From 59cb59290e7fe87c6ea5a70b3e06cdf6169d908f Mon Sep 17 00:00:00 2001
From: Ely Lucas <ely@meta-tek.net>
Date: Tue, 7 Dec 2021 14:15:40 -0700
Subject: [PATCH 07/13] vue updates

---
 content/api/commands/mount.md | 424 +++++++++++++++++++++++++++++-----
 1 file changed, 369 insertions(+), 55 deletions(-)

diff --git a/content/api/commands/mount.md b/content/api/commands/mount.md
index f468c53f77..8ef4b8944c 100644
--- a/content/api/commands/mount.md
+++ b/content/api/commands/mount.md
@@ -87,9 +87,8 @@ will need to add custom typings for your commands to get code completion and to
 avoid any TypeScript errors.
 
 The typings will need to be in a location that any code can access, therefore,
-we recommend creating a `cypress.d.ts` file in the root directory.
-
-Then, you can update the `cypress.d.ts` file with:
+we recommend creating a `cypress.d.ts` file in the root directory, and use this
+example as a starting point for customizing your own command:
 
 <code-group-react-vue>
 <template #react>
@@ -152,22 +151,30 @@ include the `cypress.d.ts` file in all your `tsconfig.json` files like so:
 You're not limited to a single `cy.mount()` command. If needed, you can create
 any number of custom mount commands, as long as they have unique names.
 
-Below are some examples for specific use cases.
+Below are some examples for common uses cases and libraries.
 
 ## React Examples
 
+If your React component relies on provider to work properly, you will need to
+wrap your component in that provider in your component tests. This is a good use
+case to create a custom mount command that wraps your components for you.
+
+Below are a few examples that demonstrate how. These examples can be adjusted
+for most other providers that you will need to support.
+
 ### React Router
 
-If you have a component that consumes a hook or component from React Router, you
-will need to make sure the component has access to a React Router provider.
-Below is a sample mount command that uses `MemoryRouter` to wrap the component.
-Setup props for `MemoryRouter` can be passed in the options param as well:
+If you have a component that consumes a hook or component from
+[React Router](https://reactrouter.com/), you will need to make sure the
+component has access to a React Router provider. Below is a sample mount command
+that uses `MemoryRouter` to wrap the component. Setup props for `MemoryRouter`
+can be passed in the options param as well:
 
 ```jsx
 import { mount } from '@cypress/react'
 import { MemoryRouter } from 'react-router-dom'
 
-Cypress.Commands.add('mountWithRouter', (component, options) => {
+Cypress.Commands.add('mountWithRouter', (component, options = {}) => {
   const { routerProps = { initialEntries: ['/'] }, ...mountOptions } = options
 
   const wrapped = <MemoryRouter {...routerProps}>{component}</MemoryRouter>
@@ -176,26 +183,50 @@ Cypress.Commands.add('mountWithRouter', (component, options) => {
 })
 ```
 
-You can pass in custom props for the `MemoryRouter` in the `options` param.
+Typings:
 
-Example usage:
+```ts
+import { MountOptions, MountReturn } from '@cypress/react'
+import { MemoryRouterProps } from 'react-router-dom'
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      /**
+       * Mounts a React node
+       * @param jsx React Node to mount
+       * @param options Additional options to pass into mount
+       */
+      mountWithRouter(
+        jsx: React.ReactNode,
+        options?: MountOptions & { routerProps?: MemoryRouterProps }
+      ): Cypress.Chainable<MountReturn>
+    }
+  }
+}
+```
+
+In this setup, you can pass in custom props for the `MemoryRouter` in the
+`options` param. Below is an example test that ensures an active link has the
+correct class applied to it by initializing the router with `initialEntries`
+pointed to a particular route:
 
 ```jsx
-it('Logout link should appear when logged in', () => {
-  cy.mountWithRouter(<Navigation loggedIn={true} />, {
+it('login link should be active when url is "/login"', () => {
+  cy.mountWithRouter(<Navigation />, {
     routerProps: {
-      initialEntries: ['/home'],
+      initialEntries: ['/login'],
     },
   })
-  cy.contains('Logout').should('exist')
+  cy.get('a').contains('Login').should('have.class', 'active')
 })
 ```
 
 ### Redux
 
-To use a component that consumes state or actions from a Redux store, you can
-create a `mountWithRedux` command that will wrap your component in a Redux
-Provider:
+To use a component that consumes state or actions from a
+[Redux](https://react-redux.js.org/) store, you can create a `mountWithRedux`
+command that will wrap your component in a Redux Provider:
 
 ```jsx
 import { mount } from '@cypress/react'
@@ -209,10 +240,10 @@ Cypress.Commands.add('mountWithRedux', (component, store, options = {}) => {
 
 Typings:
 
-```jsx
-import { MountOptions, MountReturn } from '@cypress/react';
-import { EnhancedStore } from '@reduxjs/toolkit';
-import { RootState } from './src/StoreState';
+```ts
+import { MountOptions, MountReturn } from '@cypress/react'
+import { EnhancedStore } from '@reduxjs/toolkit'
+import { RootState } from './src/StoreState'
 
 declare global {
   namespace Cypress {
@@ -227,17 +258,15 @@ declare global {
         jsx: React.ReactNode,
         store: EnhancedStore<RootState>,
         options?: MountOptions
-      ): Cypress.Chainable<MountReturn>;
+      ): Cypress.Chainable<MountReturn>
     }
   }
 }
 ```
 
 The second param to the `mountWithRedux` command is the store that the provider
-gets initialized with. We recommend having a factory method that returns a new
-store each time so that the store is not reused between tests.
-
-Example Usage:
+gets initialized with. It is important that the store be initialized with each
+new test to ensure changes to the store don't affect other tests:
 
 ```jsx
 import { getStore } from '../redux/store'
@@ -246,48 +275,333 @@ import { UserProfile } from './UserProfile'
 
 it('User profile should display users name', () => {
   const user = { name: 'test person' }
+
+  // getStore is a factory method that creates a new store
   const store = getStore()
+
   // setUser is an action exported from the user slice
   store.dispatch(setUser(user))
+
   cy.mountWithRedux(<UserProfile />, store)
+
   cy.get('div.name').should('have.text', user.name)
 })
 ```
 
 ## Vue Examples
 
-### Plugins & Global Vue Components
+Adding plugins and global components are some common scenarios for creating
+custom mount commands in Vue. Below are examples that demonstrate how set up a
+mount command for a few popular Vue libraries. These examples can be adapted to
+other libraries as well.
 
-Vue components like Buttons and TextFields might be registered at the global
-level in the main file to avoid having to import them into each component that
-consumes them. If you try to run a test on one of these, the common components
-won't render because the tests don't use the `app` that is setup in the main
-file.
+### Vuetify
 
-We can create a custom mount command that will add these global components to
-the options that get passed into `mount`:
+This example shows how to set a global `cy.mount` command that configures
+[Vuetify](https://vuetifyjs.com/), ensuring components that utilize the UI
+library display properly during test runs.
 
-```jsx
+Vuetify is a plugin that must be registered and have a few custom attributes on
+the root element setup for styling to appear correct.
+
+<code-group-vue2-vue3>
+<template #vue2>
+
+```js
 import { mount } from '@cypress/vue'
+import vuetify from '../../src/plugins/vuetify'
 
-Cypress.Commands.add('mount', (comp, options = {}) => {
-    // Setup options object
-    options.global = options.global || {};
-    options.global.stubs = options.global.stubs || {};
-    options.global.stubs['transition'] = false;
-    options.global.components = options.global.components || {};
-    options.global.plugins = options.global.plugins || [];
-
-    // Add any global plugins
-    // options.global.plugins.push({
-    //   install(app) {
-    //     app.use(MyPlugin);
-    //   },
-    // });
-
-    // Add any global components
-    options.global.components['Button'] = Button
-
-    return mount(comp, options)
+Cypress.Commands.overwrite('mount', (comp, options = {}) => {
+  // Add attributes needed for Vuetify styling
+  const root = document.getElementById('__cy_root')
+  if (!root.classList.contains('v-application')) {
+    root.classList.add('v-application')
   }
+  root.setAttribute('data-app', 'true')
+
+  // vuetify import calls Vue.use(Vuetify) directly
+  // so no need to call it directly here
+
+  return mount(comp, {
+    vuetify,
+    ...options,
+  })
+})
 ```
+
+</template>
+<template #vue3>
+
+```js
+import { mount } from '@cypress/vue'
+import vuetify from '../../src/plugins/vuetify'
+
+Cypress.Commands.overwrite('mount', (comp, options = {}) => {
+  // Setup options object
+  options.global = options.global || {}
+  options.global.plugins = options.global.plugins || []
+
+  // Add attributes needed for Vuetify styling
+  const root = document.getElementById('__cy_root')
+  if (!root.classList.contains('v-application')) {
+    root.classList.add('v-application')
+  }
+  root.setAttribute('data-app', 'true')
+
+  // Add Vuetify plugin
+  options.global.plugins.push({
+    install(app) {
+      app.use(vuetify)
+    },
+  })
+
+  return mount(comp, options)
+})
+```
+
+</template>
+</code-group-vue2-vue3>
+
+Typings:
+
+```ts
+import { mount } from '@cypress/vue'
+
+type MountParams = Parameters<typeof mount>
+type OptionsParam = MountParams[1]
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      /**
+       * Helper mount function for Vue Components
+       * @param component Vue Component or JSX Element to mount
+       * @param options Options passed to Vue Test Utils
+       */
+      mount(component: any, options?: OptionsParam): Chainable<any>
+    }
+  }
+}
+```
+
+Usage:
+
+```ts
+import Button from './Button.vue'
+
+it('Shows a button', () => {
+  cy.mount(Button, {
+    slots: {
+      default: () => 'Click Me',
+    },
+  })
+  cy.contains('Click Me').should('exist')
+})
+```
+
+### Vue Router
+
+To wire up a plugin such as Vue Router, you can create a custom command to
+register the plugin and pass in a custom implementation of the router via the
+options param.
+
+<code-group-vue2-vue3>
+<template #vue2>
+
+```js
+import { mount } from '@cypress/vue'
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import { router } from '../../src/router'
+
+Cypress.Commands.add('mountWithRouter', (comp, options = {}) => {
+  // Add the VueRouter plugin
+  Vue.use(VueRouter)
+
+  // Use the router passed in via options,
+  // or the default one if not provided
+  options.router = options.router || router
+
+  return mount(comp, options)
+})
+```
+
+Typings:
+
+```ts
+import { mount } from '@cypress/vue'
+import VueRouter from 'vue-router'
+
+type MountParams = Parameters<typeof mount>
+type OptionsParam = MountParams[1] & { router?: VueRouter }
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      /**
+       * Helper mount function for Vue Components
+       * @param component Vue Component or JSX Element to mount
+       * @param options Options passed to Vue Test Utils
+       */
+      mountWithRouter(component: any, options?: OptionsParam): Chainable<any>
+    }
+  }
+}
+```
+
+Usage:
+
+```js
+import VueRouter from 'vue-router'
+import Navigation from './Navigation.vue'
+import { routes } from '../router'
+
+it('login link should be active when url is "/login"', () => {
+  // Create a new router instance for each test
+  const router = new VueRouter({
+    mode: 'history',
+    routes,
+  })
+
+  // Change location to `/login`
+  router.push('/login')
+
+  // Pass the already initialized router for use
+  cy.mountWithRouter(Navigation, { router: router })
+
+  cy.get('a').contains('Login').should('have.class', 'router-link-active')
+})
+```
+
+</template>
+<template #vue3>
+
+```js
+import { mount } from '@cypress/vue'
+import { createMemoryHistory, createRouter } from 'vue-router'
+import { routes } from '../../src/router'
+
+Cypress.Commands.add('mountWithRouter', (comp, options = {}) => {
+  // Setup options object
+  options.global = options.global || {}
+  options.global.plugins = options.global.plugins || []
+
+  // Use the router passed in via options,
+  // or the default one if not provided
+  options.router =
+    options.router ||
+    createRouter({
+      routes: routes,
+      history: createMemoryHistory(),
+    })
+
+  // Add router plugin
+  options.global.plugins.push({
+    install(app) {
+      app.use(options.router)
+    },
+  })
+
+  return mount(comp, options)
+})
+```
+
+Typings:
+
+```ts
+import { mount } from '@cypress/vue'
+import { Router } from 'vue-router'
+
+type MountParams = Parameters<typeof mount>
+type OptionsParam = MountParams[1] & { router?: Router }
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      /**
+       * Helper mount function for Vue Components
+       * @param component Vue Component or JSX Element to mount
+       * @param options Options passed to Vue Test Utils
+       */
+      mountWithRouter(component: any, options?: OptionsParam): Chainable<any>
+    }
+  }
+}
+```
+
+Usage:
+
+Calling `router.push()` in the router for Vue 3 is an asynchronous operation.
+You can use the [cy.wrap](/api/commands/wrap) command to have Cypress await the
+promise's resolve before it continues with other commands:
+
+```js
+import Navigation from './Navigation.vue'
+import { routes } from '../router'
+import { createMemoryHistory, createRouter } from 'vue-router'
+
+it('login link should be active when url is "/login"', () => {
+  // Create a new router instance for each test
+  const router = createRouter({
+    routes: routes,
+    history: createMemoryHistory(),
+  })
+
+  // Change location to `/login`,
+  // and await on the promise with cy.wrap
+  cy.wrap(router.push('/login'))
+
+  // Pass the already initialized router for use
+  cy.mountWithRouter(<Navigation />, { router: router })
+
+  cy.get('a').contains('Login').should('have.class', 'router-link-active')
+})
+```
+
+</template>
+</code-group-vue2-vue3>
+
+### Global Components
+
+If you have components that are registered globally in the main application
+file, you will need to set them up in your mount command as well.
+
+<code-group-vue2-vue3>
+<template #vue2>
+
+```js
+import { mount } from '@cypress/vue'
+import Button from '../../src/components/Button.vue'
+
+Cypress.Commands.overwrite('mount', (comp, options = {}) => {
+  // Register global components
+  Vue.component('MyButton', Button)
+
+  return mount(comp, {
+    vuetify,
+    ...options,
+  })
+})
+```
+
+</template>
+<template #vue3>
+
+```js
+import { mount } from '@cypress/vue'
+import Button from '../../src/components/Button.vue'
+
+Cypress.Commands.overwrite('mount', (comp, options = {}) => {
+  // Setup options object
+  options.global = options.global || {}
+  options.global.components = options.global.components || {}
+
+  // Register global components
+  options.global.components['Button'] = Button
+
+  return mount(comp, options)
+})
+```
+
+</template>
+</code-group-vue2-vue3>

From 9f9d8e183b9ff36b603c153671e739a8f61a9d8e Mon Sep 17 00:00:00 2001
From: Ely Lucas <ely@cypress.io>
Date: Wed, 8 Dec 2021 10:53:01 -0700
Subject: [PATCH 08/13] Update content/api/commands/mount.md

Co-authored-by: Ben Alman <cowboy@rj3.net>
---
 content/api/commands/mount.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/api/commands/mount.md b/content/api/commands/mount.md
index 8ef4b8944c..68dbef2c25 100644
--- a/content/api/commands/mount.md
+++ b/content/api/commands/mount.md
@@ -5,7 +5,7 @@ componentSpecific: true
 
 <Alert type="warning">
 
-Cypress does not have a **cy.mount()** command out-of-the-box. See below for
+Cypress does not have a `cy.mount()` command out-of-the-box. See below for
 info on how to craft your own.
 
 </Alert>

From a076f0b2936668d24ae39e3e2a64f35b478e4eab Mon Sep 17 00:00:00 2001
From: Ely Lucas <ely@cypress.io>
Date: Wed, 8 Dec 2021 11:27:05 -0700
Subject: [PATCH 09/13] Update content/api/commands/mount.md

Co-authored-by: Ben Alman <cowboy@rj3.net>
---
 content/api/commands/mount.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/api/commands/mount.md b/content/api/commands/mount.md
index 68dbef2c25..730bbaba2b 100644
--- a/content/api/commands/mount.md
+++ b/content/api/commands/mount.md
@@ -575,7 +575,7 @@ import Button from '../../src/components/Button.vue'
 
 Cypress.Commands.overwrite('mount', (comp, options = {}) => {
   // Register global components
-  Vue.component('MyButton', Button)
+  Vue.component('Button', Button)
 
   return mount(comp, {
     vuetify,

From 5423c47bafa512992f93aef5a418e9dd33c4145e Mon Sep 17 00:00:00 2001
From: Ely Lucas <ely@cypress.io>
Date: Wed, 8 Dec 2021 16:22:07 -0700
Subject: [PATCH 10/13] Update content/api/commands/mount.md

Co-authored-by: Ben Alman <cowboy@rj3.net>
---
 content/api/commands/mount.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/api/commands/mount.md b/content/api/commands/mount.md
index 730bbaba2b..69e16cf8ab 100644
--- a/content/api/commands/mount.md
+++ b/content/api/commands/mount.md
@@ -467,7 +467,7 @@ it('login link should be active when url is "/login"', () => {
   router.push('/login')
 
   // Pass the already initialized router for use
-  cy.mountWithRouter(Navigation, { router: router })
+  cy.mountWithRouter(Navigation, { router })
 
   cy.get('a').contains('Login').should('have.class', 'router-link-active')
 })

From 38b2eec0bb791309ab334b591f7e5615dde8140c Mon Sep 17 00:00:00 2001
From: Ely Lucas <ely@cypress.io>
Date: Wed, 8 Dec 2021 16:22:16 -0700
Subject: [PATCH 11/13] Update content/api/commands/mount.md

Co-authored-by: Ben Alman <cowboy@rj3.net>
---
 content/api/commands/mount.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/api/commands/mount.md b/content/api/commands/mount.md
index 69e16cf8ab..01e00e572e 100644
--- a/content/api/commands/mount.md
+++ b/content/api/commands/mount.md
@@ -273,7 +273,7 @@ import { getStore } from '../redux/store'
 import { setUser } from '../redux/userSlice'
 import { UserProfile } from './UserProfile'
 
-it('User profile should display users name', () => {
+it('User profile should display user name', () => {
   const user = { name: 'test person' }
 
   // getStore is a factory method that creates a new store

From ac856380d0190d56f6599ae6e93b3ce97f277a66 Mon Sep 17 00:00:00 2001
From: Ely Lucas <ely@meta-tek.net>
Date: Thu, 9 Dec 2021 12:23:31 -0700
Subject: [PATCH 12/13] feedback changes

---
 content/api/commands/mount.md | 73 ++++++++++++++++++++++++-----------
 1 file changed, 50 insertions(+), 23 deletions(-)

diff --git a/content/api/commands/mount.md b/content/api/commands/mount.md
index 01e00e572e..05eb647258 100644
--- a/content/api/commands/mount.md
+++ b/content/api/commands/mount.md
@@ -5,33 +5,33 @@ componentSpecific: true
 
 <Alert type="warning">
 
-Cypress does not have a `cy.mount()` command out-of-the-box. See below for
-info on how to craft your own.
+Cypress does not have a `cy.mount()` command out-of-the-box. See below for info
+on how to craft your own.
 
 </Alert>
 
 For
 [Component Testing](/guides/overview/choosing-testing-type#What-is-Component-Testing),
-we recommend creating a custom `cy.mount` command which wraps the mount command
-from the framework-specific libraries in your component tests. Doing so offers a
-few advantages:
+we recommend creating a custom `cy.mount()` command which wraps the mount
+command from the framework-specific libraries in your component tests. Doing so
+offers a few advantages:
 
-- You don't need to import the mount command into every test as the `cy.mount`
+- You don't need to import the mount command into every test as the `cy.mount()`
   command is available globally.
 - You can set up common scenarios that you usually have to do in each test, like
   wrapping a component in a
   [React Provider](https://reactjs.org/docs/context.html) or adding
   [Vue plugins](https://vuejs.org/v2/guide/plugins.html).
 
-If you attempt to use `cy.mount` before creating it, you will get a warning:
+If you attempt to use `cy.mount()` before creating it, you will get a warning:
 
-<img src="/_nuxt/assets/img/guides/component-testing/cy-mount-must-be-implemented.png" alt="cy.mount must be implemented by the user." />
+<img src="/_nuxt/assets/img/guides/component-testing/cy-mount-must-be-implemented.png" alt="cy.mount() must be implemented by the user." />
 
 Let's take a look at how to implement the command.
 
-## Creating a New `cy.mount` Command
+## Creating a New `cy.mount()` Command
 
-To use `cy.mount` you will need to add a
+To use `cy.mount()` you will need to add a
 [custom command](/api/cypress-api/custom-commands) to the commands file. Below
 are examples that you can start with for your commands:
 
@@ -79,7 +79,7 @@ Cypress.Commands.overwrite('mount', (comp, options = {}) => {
 </template>
 </code-group-react-vue>
 
-## Adding TypeScript Typings for `cy.mount` Commands
+## Adding TypeScript Typings for `cy.mount()` Commands
 
 When working in
 [TypeScript](https://docs.cypress.io/guides/tooling/typescript-support), you
@@ -212,12 +212,22 @@ correct class applied to it by initializing the router with `initialEntries`
 pointed to a particular route:
 
 ```jsx
+import { Navigation } from './Navigation'
+
+it('home link should be active when url is "/"', () => {
+  // No need to pass in custom initialEntries as default url is '/'
+  cy.mountWithRouter(<Navigation />)
+
+  cy.get('a').contains('Home').should('have.class', 'active')
+})
+
 it('login link should be active when url is "/login"', () => {
   cy.mountWithRouter(<Navigation />, {
     routerProps: {
       initialEntries: ['/login'],
     },
   })
+
   cy.get('a').contains('Login').should('have.class', 'active')
 })
 ```
@@ -231,9 +241,14 @@ command that will wrap your component in a Redux Provider:
 ```jsx
 import { mount } from '@cypress/react'
 import { Provider } from 'react-redux'
+import { getStore } from '../../src/store'
+
+Cypress.Commands.add('mountWithRedux', (component, options = {}) => {
+  // Use the default store if one is not provided
+  options.reduxStore = options.reduxStore || getStore()
+
+  const wrapped = <Provider store={options.reduxStore}>{component}</Provider>
 
-Cypress.Commands.add('mountWithRedux', (component, store, options = {}) => {
-  const wrapped = <Provider store={store}>{component}</Provider>
   return mount(wrapped, options)
 })
 ```
@@ -251,22 +266,21 @@ declare global {
       /**
        * Mounts a React node
        * @param jsx React Node to mount
-       * @param store The store to initialize the provider with
        * @param options Additional options to pass into mount
        */
       mountWithRedux(
         jsx: React.ReactNode,
-        store: EnhancedStore<RootState>,
-        options?: MountOptions
+        options?: MountOptions & { reduxStore?: EnhancedStore<RootState> }
       ): Cypress.Chainable<MountReturn>
     }
   }
 }
 ```
 
-The second param to the `mountWithRedux` command is the store that the provider
-gets initialized with. It is important that the store be initialized with each
-new test to ensure changes to the store don't affect other tests:
+You can pass in an instance of the store that the provider will use on the
+options param, which can be useful to initialize a store with certain data for
+tests. It is important that the store be initialized with each new test to
+ensure changes to the store don't affect other tests:
 
 ```jsx
 import { getStore } from '../redux/store'
@@ -282,7 +296,7 @@ it('User profile should display user name', () => {
   // setUser is an action exported from the user slice
   store.dispatch(setUser(user))
 
-  cy.mountWithRedux(<UserProfile />, store)
+  cy.mountWithRedux(<UserProfile />, { reduxStore: store })
 
   cy.get('div.name').should('have.text', user.name)
 })
@@ -297,7 +311,7 @@ other libraries as well.
 
 ### Vuetify
 
-This example shows how to set a global `cy.mount` command that configures
+This example shows how to set a global `cy.mount()` command that configures
 [Vuetify](https://vuetifyjs.com/), ensuring components that utilize the UI
 library display properly during test runs.
 
@@ -456,6 +470,13 @@ import VueRouter from 'vue-router'
 import Navigation from './Navigation.vue'
 import { routes } from '../router'
 
+it('home link should be active when url is "/"', () => {
+  // No need to pass in custom router as default url is '/'
+  cy.mountWithRouter(Navigation)
+
+  cy.get('a').contains('Home').should('have.class', 'router-link-active')
+})
+
 it('login link should be active when url is "/login"', () => {
   // Create a new router instance for each test
   const router = new VueRouter({
@@ -540,6 +561,13 @@ import Navigation from './Navigation.vue'
 import { routes } from '../router'
 import { createMemoryHistory, createRouter } from 'vue-router'
 
+it('home link should be active when url is "/"', () => {
+  // No need to pass in custom router as default url is '/'
+  cy.mountWithRouter(<Navigation />)
+
+  cy.get('a').contains('Home').should('have.class', 'router-link-active')
+})
+
 it('login link should be active when url is "/login"', () => {
   // Create a new router instance for each test
   const router = createRouter({
@@ -552,7 +580,7 @@ it('login link should be active when url is "/login"', () => {
   cy.wrap(router.push('/login'))
 
   // Pass the already initialized router for use
-  cy.mountWithRouter(<Navigation />, { router: router })
+  cy.mountWithRouter(<Navigation />, { router })
 
   cy.get('a').contains('Login').should('have.class', 'router-link-active')
 })
@@ -578,7 +606,6 @@ Cypress.Commands.overwrite('mount', (comp, options = {}) => {
   Vue.component('Button', Button)
 
   return mount(comp, {
-    vuetify,
     ...options,
   })
 })

From bcc884cf46e5be84dad6bf3c1a8426e62d27a1aa Mon Sep 17 00:00:00 2001
From: Ely Lucas <ely@meta-tek.net>
Date: Fri, 10 Dec 2021 13:57:02 -0700
Subject: [PATCH 13/13] changes

---
 content/api/commands/mount.md | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/content/api/commands/mount.md b/content/api/commands/mount.md
index 05eb647258..a565248a2d 100644
--- a/content/api/commands/mount.md
+++ b/content/api/commands/mount.md
@@ -245,11 +245,11 @@ import { getStore } from '../../src/store'
 
 Cypress.Commands.add('mountWithRedux', (component, options = {}) => {
   // Use the default store if one is not provided
-  options.reduxStore = options.reduxStore || getStore()
+  const { reduxStore = getStore(), ...mountOptions } = options
 
-  const wrapped = <Provider store={options.reduxStore}>{component}</Provider>
+  const wrapped = <Provider store={reduxStore}>{component}</Provider>
 
-  return mount(wrapped, options)
+  return mount(wrapped, mountOptions)
 })
 ```
 
@@ -605,9 +605,7 @@ Cypress.Commands.overwrite('mount', (comp, options = {}) => {
   // Register global components
   Vue.component('Button', Button)
 
-  return mount(comp, {
-    ...options,
-  })
+  return mount(comp, options)
 })
 ```