cypress 11.0.0 → 11.1.0

package/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('<app-hello-world></app-hello-world>', {
-      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)

package/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:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cypress",
-  "version": "11.0.0",
+  "version": "11.1.0",
   "main": "index.js",
   "scripts": {
     "postinstall": "node index.js --exec install",
@@ -118,8 +118,8 @@
   },
   "buildInfo": {
     "commitBranch": "develop",
-    "commitSha": "2513beac307e95267ab736a93a39cd1cd1280506",
-    "commitDate": "2022-11-08T20:29:47.000Z",
+    "commitSha": "cea2664a26da06655017e51f4911ea505a6b685b",
+    "commitDate": "2022-11-15T15:41:42.000Z",
     "stable": true
   },
   "description": "Cypress is a next generation front end testing tool built for the modern web",

package/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(<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.
-
-## 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(<Footer />)
-})
-```
-
-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(<Todo todo={todo} />, { 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)

package/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)

package/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)

package/types/cypress.d.ts

@@ -395,7 +395,7 @@ declare namespace Cypress {
     })
     ```
      */
-    config(Object: ConfigOptions): void
+    config(Object: TestConfigOverrides): void
 
     // no real way to type without generics
     /**
@@ -670,7 +670,7 @@ declare namespace Cypress {
      * If validation fails after restoring a session, `setup` will re-run.
      * @default {false}
      */
-    validate?: () => Promise<false | void> | false | void
+    validate?: () => Promise<false | void> | void
   }
 
   type CanReturnChainable = void | Chainable | Promise<unknown>
@@ -3074,7 +3074,16 @@ declare namespace Cypress {
     xhrUrl: string
   }
 
-  interface TestConfigOverrides extends Partial<Pick<ConfigOptions, 'animationDistanceThreshold' | 'blockHosts' | 'defaultCommandTimeout' | 'env' | 'execTimeout' | 'includeShadowDom' | 'numTestsKeptInMemory' | 'pageLoadTimeout' | 'redirectionLimit' | 'requestTimeout' | 'responseTimeout' | 'retries' | 'screenshotOnRunFailure' | 'slowTestThreshold' | 'scrollBehavior' | 'taskTimeout' | 'viewportHeight' | 'viewportWidth' | 'waitForAnimations' | 'experimentalSessionAndOrigin'>>, Partial<Pick<ResolvedConfigOptions, 'baseUrl'>> {
+  interface SuiteConfigOverrides extends Partial<
+    Pick<ConfigOptions, 'animationDistanceThreshold' | 'blockHosts' | 'defaultCommandTimeout' | 'env' | 'execTimeout' | 'includeShadowDom' | 'numTestsKeptInMemory' | 'pageLoadTimeout' | 'redirectionLimit' | 'requestTimeout' | 'responseTimeout' | 'retries' | 'screenshotOnRunFailure' | 'slowTestThreshold' | 'scrollBehavior' | 'taskTimeout' | 'viewportHeight' | 'viewportWidth' | 'waitForAnimations' | 'experimentalSessionAndOrigin'>
+  >, Partial<Pick<ResolvedConfigOptions, 'baseUrl' | 'testIsolation'>> {
+    browser?: IsBrowserMatcher | IsBrowserMatcher[]
+    keystrokeDelay?: number
+  }
+
+  interface TestConfigOverrides extends Partial<
+    Pick<ConfigOptions, 'animationDistanceThreshold' | 'blockHosts' | 'defaultCommandTimeout' | 'env' | 'execTimeout' | 'includeShadowDom' | 'numTestsKeptInMemory' | 'pageLoadTimeout' | 'redirectionLimit' | 'requestTimeout' | 'responseTimeout' | 'retries' | 'screenshotOnRunFailure' | 'slowTestThreshold' | 'scrollBehavior' | 'taskTimeout' | 'viewportHeight' | 'viewportWidth' | 'waitForAnimations' | 'experimentalSessionAndOrigin'>
+  >, Partial<Pick<ResolvedConfigOptions, 'baseUrl'>> {
     browser?: IsBrowserMatcher | IsBrowserMatcher[]
     keystrokeDelay?: number
   }
@@ -6079,7 +6088,7 @@ declare namespace Mocha {
      * Describe a "suite" with the given `title`, TestOptions, and callback `fn` containing
      * nested suites.
      */
-    (title: string, config: Cypress.TestConfigOverrides, fn: (this: Suite) => void): Suite
+    (title: string, config: Cypress.SuiteConfigOverrides, fn: (this: Suite) => void): Suite
   }
 
   interface ExclusiveSuiteFunction {
@@ -6087,10 +6096,10 @@ declare namespace Mocha {
      * Describe a "suite" with the given `title`, TestOptions, and callback `fn` containing
      * nested suites. Indicates this suite should be executed exclusively.
      */
-    (title: string, config: Cypress.TestConfigOverrides, fn: (this: Suite) => void): Suite
+    (title: string, config: Cypress.SuiteConfigOverrides, fn: (this: Suite) => void): Suite
   }
 
   interface PendingSuiteFunction {
-    (title: string, config: Cypress.TestConfigOverrides, fn: (this: Suite) => void): Suite | void
+    (title: string, config: Cypress.SuiteConfigOverrides, fn: (this: Suite) => void): Suite | void
   }
 }

package/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)

package/vue2/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [@cypress/vue2-v2.0.1](https://github.com/cypress-io/cypress/compare/@cypress/vue2-v2.0.0...@cypress/vue2-v2.0.1) (2022-11-14)
+
+
+### Bug Fixes
+
+* vue2 global directives in component testing ([#24488](https://github.com/cypress-io/cypress/issues/24488)) ([741019d](https://github.com/cypress-io/cypress/commit/741019d9618b7be79db64c9039ebca07741dd5c7))
+
 # [@cypress/vue2-v2.0.0](https://github.com/cypress-io/cypress/compare/@cypress/vue2-v1.1.2...@cypress/vue2-v2.0.0) (2022-11-07)
 
 

package/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)

package/vue2/dist/cypress-vue2.cjs.js

@@ -19872,6 +19872,14 @@ const installMixins = (Vue, options) => {
         });
     }
 };
+const registerGlobalDirectives = (Vue, options) => {
+    const directives = Cypress._.get(options, 'extensions.directives');
+    if (Cypress._.isPlainObject(directives)) {
+        Object.keys(directives).forEach((name) => {
+            Vue.directive(name, directives[name]);
+        });
+    }
+};
 const hasStore = ({ store }) => Boolean(store && store._vm);
 const forEachValue = (obj, fn) => {
     return Object.keys(obj).forEach((key) => fn(obj[key], key));
@@ -19988,6 +19996,7 @@ const mount = (component, optionsOrProps = {}) => {
         installFilters(localVue, options);
         installMixins(localVue, options);
         installPlugins(localVue, options, props);
+        registerGlobalDirectives(localVue, options);
         registerGlobalComponents(localVue, options);
         props.attachTo = componentNode;
         const wrapper = localVue.extend(component);

package/vue2/dist/cypress-vue2.esm-bundler.js

@@ -19864,6 +19864,14 @@ const installMixins = (Vue, options) => {
         });
     }
 };
+const registerGlobalDirectives = (Vue, options) => {
+    const directives = Cypress._.get(options, 'extensions.directives');
+    if (Cypress._.isPlainObject(directives)) {
+        Object.keys(directives).forEach((name) => {
+            Vue.directive(name, directives[name]);
+        });
+    }
+};
 const hasStore = ({ store }) => Boolean(store && store._vm);
 const forEachValue = (obj, fn) => {
     return Object.keys(obj).forEach((key) => fn(obj[key], key));
@@ -19980,6 +19988,7 @@ const mount = (component, optionsOrProps = {}) => {
         installFilters(localVue, options);
         installMixins(localVue, options);
         installPlugins(localVue, options, props);
+        registerGlobalDirectives(localVue, options);
         registerGlobalComponents(localVue, options);
         props.attachTo = componentNode;
         const wrapper = localVue.extend(component);

package/vue2/dist/index.d.ts

@@ -182,6 +182,9 @@ declare type VueLocalComponents = Record<string, VueComponent>;
 declare type VueFilters = {
     [key: string]: (value: string) => string;
 };
+declare type VueDirectives = {
+    [key: string]: Function | Object;
+};
 declare type VueMixin = unknown;
 declare type VueMixins = VueMixin | VueMixin[];
 declare type VuePluginOptions = unknown;
@@ -259,6 +262,26 @@ interface MountOptionsExtensions {
      * @memberof MountOptionsExtensions
      */
     plugins?: VuePlugins;
+    /**
+     * Optional Vue directives to install while mounting the component
+     *
+     * @memberof MountOptionsExtensions
+     * @see https://github.com/cypress-io/cypress/tree/develop/npm/vue#examples
+     * @example
+     *  const directives = {
+     *    custom: {
+     *        name: 'custom',
+     *        bind (el, binding) {
+     *          el.dataset['custom'] = binding.value
+     *        },
+     *        unbind (el) {
+     *          el.removeAttribute('data-custom')
+     *        },
+     *    },
+     *  }
+     *  mount(Hello, { extensions: { directives }})
+     */
+    directives?: VueDirectives;
 }
 /**
  * Options controlling how the component is going to be mounted,