Componentes de prueba de unidad vue con emisión Jest

Estoy luchando para probar algunos componentes en una aplicación y apreciaría si alguien pudiera ayudarme. Ya he establecido el entorno Jest para probar en Vue y las cosas funcionan bien hasta que intento probar un componente que confía en otros módulos con funciones en él. Estas funciones son los ayudantes útiles para importar acciones de vuex y mediadores más rápido en los componentes. Aquí hay algunas líneas de código que espero pueda ayudar con el problema:

  • este es el error que Jest lanza en la consola:
/app # yarn test:unit /common / page - header / ProjectWizard.spec.js
yarn run v1 .22 .5
$ jest / common / page - header / ProjectWizard.spec.js
FAIL src / specs / common / page - header / projectWizard.spec.js
● Test suite failed to run

Configuration error:

  Could not locate module @ / state / helpers mapped as:
  /app/$1.

Please check your configuration
for these entries: {
  "moduleNameMapper": {
    "/^@\/(.*)$/": "/app/$1"
  },
  "resolver": undefined
}

57 |
  import VueGoogleAutocomplete from '../../../node_modules/vue-google-autocomplete'
58 |
  > 59 |
  import {
    |
    ^
    60 | contractTypesMethods,
    61 | contractTypesGetters,
    62 | installationTypesMethods,

    at createNoMappedModuleFoundError(node_modules / jest - resolve / build / index.js: 551: 17)
    at src / components / builder / ProjectWizard.vue: 59: 1
    at Object. < anonymous > (src / components / builder / ProjectWizard.vue: 491: 3)
  • este es el archivo ProjectWizard:
  • este es mi archivo de configuración de jest:
module.exports = {
  verbose: true,
  roots: ["/src/", "/src/specs/"],
  moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
  moduleNameMapper: {
    '^@/(.*)$': '/$1',
    "~(.*)$": "/$1"
  },
  transform: {
    "^.+\\.js$": "babel-jest",
    '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2|svg)$': 'jest-transform-stub',
    "^.+\\.vue$": "vue-jest"
  },
  snapshotSerializers: [
    "/node_modules/jest-serializer-vue"
  ],
  transformIgnorePatterns: [
    '/node_modules/(?!vue-google-autocomplete)',
    '/(?!)'
  ]
}
  • y finalmente este es el código en el archivo de espectro:
import { mount } from '@vue/test-utils'
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import Component from '@/src/components/builder/ProjectWizard'

Vue.use(BootstrapVue)

describe('ProjectWizard', () => {
  it('should render a card for each project received from its parent', () => {
    const wrapper = mount(Component)
    console.log(wrapper)
  })
})

No entiendo por qué Jest no puede encontrar esas funciones ya que la ubicación del módulo es correcta.

Pregunta hecha hace 3 años, 4 meses, 27 días - Por codecrafty

2 Respuestas:

  • El error que estás viendo en Jest es debido a una incongruencia en la configuración del mapeo de módulos que estás utilizando en tu archivo de configuración de Jest. En el mensaje de error que proporcionaste, Jest está indicando que no puede encontrar el módulo @/state/helpers que estás importando en tu componente ProjectWizard.vue.

    En tu archivo de configuración de Jest, estás utilizando la siguiente configuración para mapear los módulos:

    javascript
moduleNameMapper: {
  '^@/(.)$': '/$1',
  "~(.)$": "/$1"
},

    Sin embargo, este mapeo no es compatible con la forma en que estás importando el módulo @/state/helpers en tu componente ProjectWizard.vue. Necesitas ajustar tu mapeo para que pueda resolver la importación correctamente.

    Puedes intentar modificar tu configuración de moduleNameMapper de la siguiente manera:

    javascript
moduleNameMapper: {
  '^@/(.)$': '/src/$1',
  "~(.)$": "/$1"
},

    Asegúrate de reemplazar <rootDir> con la ruta real de tu directorio raíz donde se encuentran los archivos de tu proyecto.

    Después de hacer este ajuste, intenta ejecutar tus pruebas nuevamente para ver si resuelve el problema con la importación del módulo @/state/helpers.

    Espero que esta solución te ayude a resolver el problema. ¡Déjame saber si necesitas más ayuda!

    Respondida el Dec 19, 2020 a las 08:59 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Parece que el problema es que el mapeador de módulos en la configuración de Jest no está configurado correctamente para asignar los módulos en @/state/helpers a src/state/helpers.

    Aquí tienes una configuración de Jest actualizada que debería resolver el problema:

    javascript
moduleNameMapper: {
  '^@/(.)$': '/src/$1',
  "~(.)$": "/$1",
  '^@/state/helpers/(.*)$': '/src/state/helpers/$1'
},

    Con esta configuración, Jest sabrá que cuando encuentre una ruta que comience con @/state/helpers, debe buscar el módulo correspondiente en src/state/helpers.

    Además, asegúrate de que el archivo ProjectWizard.vue tiene acceso a los módulos en @/state/helpers. Si los módulos se importan usando rutas relativas, como import { contractTypesMethods } from '../state/helpers', puede que necesites actualizar las rutas de importación para que utilicen @ en su lugar, como import { contractTypesMethods } from '@/state/helpers'.

    Respondida el Dec 19, 2020 a las 09:10 - por Gemini

    Votos positivos: 0 | Votos negativos: 0