chore: bump to vue v3.2.34 (#1510)

* chore: bump to vue v3.2.34

* chore: fix tests

* chore: clean tsd tests for vue v3.2.34

* chore: lint fix

* chore: add overload on findComponent for component Options

Co-authored-by: Carlos Rodrigues <[email protected]>

Author: cexbrayat

package.json

@@ -34,9 +34,9 @@
     "@typescript-eslint/eslint-plugin": "^5.25.0",
     "@typescript-eslint/parser": "^5.25.0",
     "@vue/babel-plugin-jsx": "^1.1.1",
-    "@vue/compat": "3.2.33",
-    "@vue/compiler-dom": "3.2.33",
-    "@vue/compiler-sfc": "3.2.33",
+    "@vue/compat": "3.2.34",
+    "@vue/compiler-dom": "3.2.34",
+    "@vue/compiler-sfc": "3.2.34",
     "@vue/vue3-jest": "27.0.0-alpha.4",
     "babel-jest": "27.5.1",
     "babel-preset-jest": "28.0.2",
@@ -57,7 +57,7 @@
     "tslib": "2.4.0",
     "typescript": "4.6.4",
     "vitepress": "^0.22.4",
-    "vue": "3.2.33",
+    "vue": "3.2.34",
     "vue-class-component": "^8.0.0-rc.1",
     "vue-jest": "^5.0.0-alpha.10",
     "vue-router": "^4.0.15",

src/baseWrapper.ts

@@ -2,8 +2,12 @@ import { textContent } from './utils'
 import type { TriggerOptions } from './createDomEvent'
 import {
   ComponentInternalInstance,
+  ComponentOptions,
   ComponentPublicInstance,
+  ComputedOptions,
+  CreateComponentPublicInstance,
   FunctionalComponent,
+  MethodOptions,
   nextTick
 } from 'vue'
 import { createDOMEvent } from './createDomEvent'
@@ -99,6 +103,29 @@ export default abstract class BaseWrapper<ElementType extends Node>
 
   // searching by string without specifying component results in WrapperLike object
   findComponent<T extends never>(selector: string): WrapperLike
+  // Find Component Options aka plain object
+  findComponent<
+    Props,
+    RawBindings = any,
+    D = any,
+    C extends ComputedOptions = ComputedOptions,
+    M extends MethodOptions = MethodOptions
+  >(
+    selector: ComponentOptions<Props, RawBindings, D, C, M>
+  ): VueWrapper<CreateComponentPublicInstance<Props, RawBindings, D, C, M>>
+  findComponent<T extends ComponentOptions>(
+    selector: string
+  ): VueWrapper<
+    T extends ComponentOptions<
+      infer Props,
+      infer RawBindings,
+      infer D,
+      infer C,
+      infer M
+    >
+      ? CreateComponentPublicInstance<Props, RawBindings, D, C, M>
+      : VueWrapper<CreateComponentPublicInstance>
+  >
   // searching for component created via defineComponent results in VueWrapper of proper type
   findComponent<T extends DefinedComponent>(
     selector: T | Exclude<FindComponentSelector, FunctionalComponent>

src/mount.ts

@@ -22,6 +22,7 @@ import {
   EmitsOptions,
   ComputedOptions,
   ComponentPropsOptions,
+  ComponentProvideOptions,
   ComponentOptions,
   ConcreteComponent,
   Prop
@@ -131,6 +132,8 @@ export function mount<
   Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
   E extends EmitsOptions = Record<string, any>,
   EE extends string = string,
+  Provide extends ComponentProvideOptions = ComponentProvideOptions,
+  RawOptions extends {} = {},
   PP = PublicProps,
   Props = Readonly<ExtractPropTypes<PropsOrPropOptions>>,
   Defaults = ExtractDefaultPropTypes<PropsOrPropOptions>
@@ -145,6 +148,8 @@ export function mount<
     Extends,
     E,
     EE,
+    Provide,
+    RawOptions,
     PP,
     Props,
     Defaults
@@ -166,6 +171,8 @@ export function mount<
       Extends,
       E,
       EE,
+      Provide,
+      RawOptions,
       PP,
       Props,
       Defaults
@@ -275,7 +282,7 @@ export function mount(
   inputComponent: any,
   options?: MountingOptions<any> & Record<string, any>
 ): VueWrapper<any> {
-  // normalise the incoming component
+  // normalize the incoming component
   const originalComponent = unwrapLegacyVueExtendComponent(inputComponent)
   let component: ConcreteComponent
   const instanceOptions = getInstanceOptions(options ?? {})

src/types.ts

@@ -21,6 +21,7 @@ export interface NameSelector {
 export type FindAllComponentsSelector =
   | DefinedComponent
   | FunctionalComponent
+  | ComponentOptions
   | NameSelector
   | string
 export type FindComponentSelector = RefSelector | FindAllComponentsSelector

test-dts/mount.d-test.ts

@@ -56,8 +56,8 @@ mount(AppWithDefine, {
 })
 
 expectError(
-  // @ts-expect-error wrong prop type should not compile
   mount(AppWithDefine, {
+    // @ts-expect-error wrong prop type should not compile
     props: { a: 2 }
   })
 )
@@ -186,14 +186,12 @@ declare const FunctionalComponentEmit: FunctionalComponent<
     level: number
   },
   { hello: (foo: string, bar: string) => void }
-  >
+>
 
 mount(FunctionalComponent)
 mount(defineComponent(FunctionalComponent))
 
 mount(FunctionalComponentEmit)
-
-// @ts-ignore vue 3.0.2 doesn't work. FIX: https://github.com/vuejs/vue-next/pull/2494
 mount(defineComponent(FunctionalComponentEmit))
 
 // class component
@@ -204,7 +202,7 @@ mount(defineComponent(FunctionalComponentEmit))
   }
 })
 class ClassComponent extends Vue {
-  dataText: string = ''
+  dataText = ''
   get computedMsg(): string {
     return `Message: ${(this.$props as any).msg}`
   }
@@ -224,6 +222,7 @@ class CustomClassComponent<Props extends {} = {}> {
   private static __vccValue?: ComponentOptions
   static get __vccOpts(): ComponentOptions {
     if (this.__vccValue) return this.__vccValue
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
     const CompConstructor = this
     return (this.__vccValue = {
       name: CompConstructor.name,
@@ -279,14 +278,20 @@ class WithPropCustomClassComponent extends CustomClassComponent<CustomClassCompo
 }
 
 expectError(
-  // @ts-expect-error should has props error
-  mount<WithPropCustomClassComponent, CustomClassComponentProps>(WithPropCustomClassComponent, {
-    props: {}
-  })
+  mount<WithPropCustomClassComponent, CustomClassComponentProps>(
+    // @ts-expect-error should has props error
+    WithPropCustomClassComponent,
+    {
+      props: {}
+    }
+  )
+)
+mount<WithPropCustomClassComponent, CustomClassComponentProps>(
+  WithPropCustomClassComponent,
+  {
+    props: { size: 'small' }
+  }
 )
-mount<WithPropCustomClassComponent, CustomClassComponentProps>(WithPropCustomClassComponent, {
-  props: { size: 'small' }
-})
 
 // endregion
 
@@ -313,7 +318,6 @@ mount(Foo, {
 
 expectError(
   mount(
-    // @ts-expect-error
     defineComponent({
       props: {
         baz: String,
@@ -324,6 +328,7 @@ expectError(
       }
     }),
     {
+      // @ts-expect-error
       props: {
         baz: 'hello'
       }

test-dts/shallowMount.d-test.ts

@@ -27,8 +27,8 @@ shallowMount(AppWithDefine, {
 })
 
 expectError(
-  // @ts-expect-error wrong prop type should not compile
   shallowMount(AppWithDefine, {
+    // @ts-expect-error wrong prop type should not compile
     props: { a: 2 }
   })
 )
@@ -97,7 +97,7 @@ wrapper = shallowMount(AppWithoutProps, {
   }
 })
 class ClassComponent extends Vue {
-  dataText: string = ''
+  dataText = ''
   get computedMsg(): string {
     return `Message: ${(this.$props as any).msg}`
   }

tests/features/compat.spec.ts

@@ -3,7 +3,7 @@ import { mount } from '../../src'
 
 jest.mock('vue', () => mockVue)
 
-const { configureCompat, extend, defineComponent, h } = mockVue as any
+const { configureCompat, extend, defineComponent, h } = mockVue
 
 describe('@vue/compat build', () => {
   describe.each(['suppress-warning', false])(

tests/mountingOptions/mocks.spec.ts

@@ -38,10 +38,10 @@ describe('mocks', () => {
         </div>
       `,
       computed: {
-        url() {
+        url(): string {
           return `/posts/${this.$route.params.id}`
         },
-        id() {
+        id(): string | string[] {
           return this.$route.params.id
         }
       },

types/compat.d.ts

@@ -1,3 +1,8 @@
 declare module '@vue/compat' {
   export * from 'vue'
+  export function extend<T>(options: T): T
+
+  export function configureCompat(
+    option: Record<string, boolean | string | number>
+  ): void
 }