fix: add types for Cypress.vue property (#354)

and update constructor type for Vue components

Author: bahmutov

README.md

@@ -596,6 +596,7 @@ Spec | Description
 <!-- prettier-ignore-start -->
 Spec | Description
 --- | ---
+[access-component](cypress/component/advanced/access-component) | Access the mounted component directly from test
 [i18n](cypress/component/advanced/i18n) | Testing component that uses [Vue I18n](https://kazupon.github.io/vue-i18n/) plugin
 [mocking-axios](cypress/component/advanced/mocking-axios) | Mocking 3rd party module imports, like `axios` for fetching data
 [mocking-components](cypress/component/advanced/mocking-components) | Mocking locally registered child components during tests

cypress/component/basic/Message.vue renamed to cypress/component/advanced/access-component/Message.vue

@@ -0,0 +1,16 @@
+# Access the component
+
+If you need to access the mounted component from test, a reference is available at `Cypress.vue` after the `mount` finishes (asynchronously).
+
+```js
+mount(...)
+.then(() => {
+  Cypress.vue.<prop> = ...
+  // or call a method
+  Cypress.vue.<method()
+})
+// then check the UI
+cy.contains(...)
+```
+
+See component [Message.vue](Message.vue) and [message-spec.js](message-spec.js)

cypress/component/advanced/access-component/README.md

@@ -1,3 +1,4 @@
+/// <reference path="../../../../dist/index.d.ts" />
 import Message from './Message.vue'
 import { mount } from 'cypress-vue-unit-test'
 

cypress/component/basic/message-spec.js renamed to cypress/component/advanced/access-component/message-spec.js

@@ -119,7 +119,7 @@ const resetStoreVM = (Vue, { store }) => {
  *         ^^^^^ this type
  *  mount(Hello)
  */
-type VueComponent = Vue.ComponentOptions<any>
+type VueComponent = Vue.ComponentOptions<any> | Vue.VueConstructor
 
 /**
  * Options to pass to the component when creating it, like
@@ -286,6 +286,28 @@ interface MountOptions {
  */
 type MountOptionsArgument = Partial<ComponentOptions & MountOptions>
 
+// when we mount a Vue component, we add it to the global Cypress object
+// so here we extend the global Cypress namespace and its Cypress interface
+declare global {
+  // eslint-disable-next-line no-redeclare
+  namespace Cypress {
+    interface Cypress {
+      /**
+       * Mounted Vue instance is available under Cypress.vue
+       * @memberof Cypress
+       * @example
+       *  mount(Greeting)
+       *  .then(() => {
+       *    Cypress.vue.message = 'Hello There'
+       *  })
+       *  // new message is displayed
+       *  cy.contains('Hello There').should('be.visible')
+       */
+      vue: Vue
+    }
+  }
+}
+
 /**
  * Direct Vue errors to the top error handler
  * where they will fail Cypress test
@@ -352,6 +374,7 @@ export const mount = (
   // https://github.com/bahmutov/cypress-vue-unit-test/issues/313
   if (
     Cypress._.isPlainObject(component) &&
+    // @ts-ignore
     Cypress._.isFunction(component.render)
   ) {
     // @ts-ignore
@@ -412,6 +435,7 @@ export const mount = (
       // create root Vue component
       // and make it accessible via Cypress.vue
       if (isConstructor(component)) {
+        // @ts-ignore
         const Cmp = Vue.extend(component)
         // @ts-ignore
         Cypress.vue = new Cmp(props).$mount(componentNode)