Las pruebas de Jest de vue TypeScript fallan: ‘$ store’ no existe en el tipo

2 minutos de lectura

avatar de usuario de v3nt
v3nt

La mayoría de mis pruebas han comenzado a fallar desde una reciente npm install.

Intenté subir/bajar de varias versiones pero no me gustó.

$store no se utiliza directamente en ninguno de los componentes o pruebas.

Probé varias correcciones de problemas similares, pero ninguna parece funcionar (es decir, extender los tipos con una cuña).

Paquetes

vue@2.6.14 
nuxt@2.15.8
"@nuxtjs/composition-api": "^0.29.3",
...
"jest-serializer-vue": "^2.0.2",
"@types/jest": "^26.0.8",
"babel-jest": "^26.6.3",
"jest": "^27.5.1",
"ts-jest": "^27.1.4",
"vue-jest": "^3.0.4",

errores

Todos los fails tienen el mismo error.

 FAIL  pages/__tests__/registrationFormP1.spec.ts
 ● Test suite failed to run

node_modules/vuex-composition-helpers/src/util.ts:104:9 - error TS2339: Property '$store' does not exist on type 'ComponentInternalInstance | CombinedVueInstance<Vue, object, object, object, Record<never, any>>'.

104  const {$store} = 'proxy' in vm ? vm.proxy : vm;

Test Suites: 7 failed, 9 passed, 16 total
Tests:       61 passed, 61 total

jest.setup.ts

import Vue from 'vue';
import Vuex from 'vuex';
import * as CompositionApi from '@nuxtjs/composition-api/module';
import yapilyStyleguide from '@yapily/styleguide';
Vue.use(yapilyStyleguide);

Vue.use(Vuex);
Vue.use(CompositionApi);

Vue.prototype.$permission = () => jest.fn();

broma.config.ts

module.exports = {
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
    '^~/(.*)$': '<rootDir>/$1',
    '^vue$': 'vue/dist/vue.common.js',
  },
  moduleFileExtensions: ['ts', 'js', 'vue', 'json', 'jsx', 'json'],
  transform: {
    '^.+\\.(ts|tsx)?$': 'ts-jest',
    '^.+\\.(js|jsx)$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest',
    '^.+\\.ts?$': 'ts-jest',
  },
  testMatch: ['<rootDir>/**/*.spec.js', '<rootDir>/**/*.spec.ts'],
  collectCoverageFrom: ['<rootDir>/components/**/*.vue', '<rootDir>/pages/**/*.vue', '**/*/*.ts'],
  coveragePathIgnorePatterns: ['/node_modules/', '/types/', '/proto/', '/.nuxt/'],
  setupFilesAfterEnv: ['./jest.setup.ts'],
  snapshotSerializers: ['jest-serializer-vue'],
  transformIgnorePatterns: ['<rootDir>/node_modules/(?!vuex-composition-helpers)'],
};

parece que el problema viene de @vue/composition-api paquete, la interfaz ComponentInternalInstance no tiene tipo $ tienda

crear vuex-shims.d.ts en proyecto raíz

import { Store } from 'vuex'


declare module '@vue/composition-api' {
  // declare your own store states
  interface State {
    count: number
  }

  // provide typings for `this.$store`
  interface ComponentInternalInstance{
    $store: Store<State> // or Store<any>
  }
}

1. agregue la dependencia de mecanografiado a su paquete json: npm install mecanografiado 2. cree el archivo tsconfig.json con la configuración:

{
  "compilerOptions": {
    "esModuleInterop" : true,
    "sourceMap": true,
    "module": "esnext",
    "target": "es5",
    "strict": true,
    "moduleResolution": "node",
    "baseUrl": ".",
    "experimentalDecorators": true,
    "downlevelIteration": true,
  },
  "include": ["**/*.ts", "**/*.vue"],
  "exclude": [
    "node_modules"
  ]
}

¿Ha sido útil esta solución?