hmsk/jest-matcher-vue-test-utils

Typescript error

sobolevn opened this issue · 2 comments

Code:

import axios from 'axios'
import { NuxtAxiosInstance } from '@nuxtjs/axios'
import Vuex, { Store, ModuleTree } from 'vuex'
import { vuexPlugin } from 'jest-matcher-vue-test-utils'

import * as locations from '~/store/locations'
import { LocationsStateType } from '~/logic/locations/types'

export function locationsModule (): ModuleTree<LocationsStateType> {
  return {
    'locations': {
      'namespaced': true,
      ...locations,
    },
  }
}

/**
 * Custom Vuex Store creation optimized for tests.
 *
 * @param module - Vuex Module to be injected.
 */
export default function createStore <T> (module: ModuleTree<T>): Store<T> {
  // TODO: allow multiple modules at the same time
  const store = new Vuex.Store<T>({
    'modules': { ...module },
    'plugins': [vuexPlugin()],
  })
  store.$axios = axios as unknown as NuxtAxiosInstance

  return store
}

Output:

TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option):
    tests/fixtures/vuex.ts:27:5 - error TS2322: Type '((store: Store<{}>) => void)[]' is not assignable to type 'Plugin<T>[]'.
      Type '(store: Store<{}>) => void' is not assignable to type 'Plugin<T>'.
        Types of parameters 'store' and 'store' are incompatible.
          Type 'Store<T>' is not assignable to type 'Store<{}>'.
            Types of property 'registerModule' are incompatible.
              Type '{ <T>(path: string, module: Module<T, T>, options?: ModuleOptions | undefined): void; <T>(path: string[], module: Module<T, T>, options?: ModuleOptions | undefined): void; }' is not assignable to type '{ <T>(path: string, module: Module<T, {}>, options?: ModuleOptions | undefined): void; <T>(path: string[], module: Module<T, {}>, options?: ModuleOptions | undefined): void; }'.
                Types of parameters 'module' and 'module' are incompatible.
                  Type 'Module<any, {}>' is not assignable to type 'Module<any, T>'.
                    Types of property 'actions' are incompatible.
                      Type 'ActionTree<any, {}> | undefined' is not assignable to type 'ActionTree<any, T> | undefined'.
                        Type 'ActionTree<any, {}>' is not assignable to type 'ActionTree<any, T>'.
                          Index signatures are incompatible.
                            Type 'Action<any, {}>' is not assignable to type 'Action<any, T>'.
                              Type 'ActionHandler<any, {}>' is not assignable to type 'Action<any, T>'.
                                Type 'ActionHandler<any, {}>' is not assignable to type 'ActionHandler<any, T>'.
                                  Type '{}' is not assignable to type 'T'.
                                    '{}' is assignable to the constraint of type 'T', but 'T' could be instantiated with a different subtype of constraint '{}'.

    27     'plugins': [vuexPlugin()],
           ~~~~~~~~~

      node_modules/vuex/types/index.d.ts:96:3
        96   plugins?: Plugin<S>[];
             ~~~~~~~
        The expected type comes from property 'plugins' which is declared here on type 'StoreOptions<T>'

Solution: generate_plugin() should be generic.

hmsk commented

Thanks for reporting! Could you let me know the version of Vuex? Probably newer version got specific types for plugins.

"version": "3.1.1",

PR is incoming.