VueJs + Nuxt + Jest : Could not locate module

Viewed 813

[SOLVED] See edit at the bottom. I'm learning to use vuejs and I want to use good practices from the start. So I'm usin nuxtjs for SSR and Jest to unit test my components.

I can't figure how to configure jest to point on my root directory instead of some src/ somewhere... In my test fil, if I change the component path and add a simple ../, it works, but it's not how it's supposed to be. And the moduleNameMapper in jest.config.json does not seems to work...

Note that I don't have an src/ directory, just a client/ one with my component, tests, pages, etc.

Here are my files, if you what i'm missing : ./package.json

{
  "private": true,
  "scripts": {
    "dev": "nuxt -c client/nuxt.config.js",
    "build": "nuxt build -c client/nuxt.config.js",
    "start": "nuxt start -c client/nuxt.config.js",
    "lint": "eslint --fix --ext .js,.vue client/",
    "test": "jest"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-brands-svg-icons": "^5.15.3",
    "@fortawesome/free-regular-svg-icons": "^5.15.3",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@fortawesome/vue-fontawesome": "^2.0.2",
    "@nuxtjs/router": "^1.6.1",
    "axios": "^0.21.1",
    "bootstrap": "^4.6.0",
    "dotenv": "^8.2.0",
    "jquery": "^3.6.0",
    "js-cookie": "^2.2.1",
    "nuxt": "^2.15.3",
    "popper.js": "^1.16.1",
    "sweetalert2": "^10.15.6",
    "typescript": "^4.2.3",
    "vform": "^1.0.1",
    "vue-i18n": "^8.24.2"
  },
  "devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/eslint-parser": "^7.13.10",
    "@babel/preset-env": "^7.13.12",
    "@nuxtjs/eslint-config": "^5.0.0",
    "@vue/cli-plugin-unit-jest": "^4.5.12",
    "@vue/test-utils": "^1.1.3",
    "eslint": "^7.22.0",
    "fs-extra": "^9.1.0",
    "jest": "^26.6.3",
    "node-sass": "^5.0.0",
    "sass-loader": "^10.1.1",
    "ts-jest": "^26.5.4",
    "ts-node": "^9.1.1",
    "vue-jest": "^3.0.7"
  }
}

./client/nuxt.config.js

require('dotenv').config()
const { join } = require('path')
const { copySync, removeSync } = require('fs-extra')

module.exports = {
  ssr: false,

  srcDir: __dirname,

  env: {
    apiUrl: process.env.API_URL || process.env.APP_URL + '/api',
    appName: process.env.APP_NAME || 'Laravel Nuxt',
    appLocale: process.env.APP_LOCALE || 'en',
    githubAuth: !!process.env.GITHUB_CLIENT_ID
  },

  head: {
    title: process.env.APP_NAME,
    titleTemplate: '%s - ' + process.env.APP_NAME,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  loading: { color: '#007bff' },

  router: {
    middleware: ['locale', 'check-auth']
  },

  css: [
    { src: '~assets/sass/app.scss', lang: 'scss' }
  ],

  plugins: [
    '~components/global',
    '~plugins/i18n',
    '~plugins/vform',
    '~plugins/axios',
    '~plugins/fontawesome',
    '~plugins/nuxt-client-init',
    { src: '~plugins/bootstrap', mode: 'client' }
  ],

  modules: [
    '@nuxtjs/router'
  ],

  build: {
    extractCSS: true
  },
  watchers: {
    webpack: {
      ignored: /node_modules/
    }
  },
  hooks: {
    generate: {
      done (generator) {
        // Copy dist files to public/_nuxt
        if (generator.nuxt.options.dev === false && generator.nuxt.options.mode === 'spa') {
          const publicDir = join(generator.nuxt.options.rootDir, 'public', '_nuxt')
          removeSync(publicDir)
          copySync(join(generator.nuxt.options.generate.dir, '_nuxt'), publicDir)
          copySync(join(generator.nuxt.options.generate.dir, '200.html'), join(publicDir, 'index.html'))
          removeSync(generator.nuxt.options.generate.dir)
        }
      }
    }
  }
}

./jest.config.ts

// Sync object
module.exports = {
    preset: '@vue/cli-plugin-unit-jest/presets/no-babel',
    moduleNameMapper: {
        "/^@\/(.*)$/": "<rootDir>/$1"
    },
};

./jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./*"],
      "~~/*": ["./*"],
      "@@/*": ["./*"]
    }
  },
  "exclude": ["node_modules", ".nuxt", "dist"]
}

And here is the error I get, no matter what I set in moduleNameMapper :

❯ node .\node_modules\jest\bin\jest.js --no-cache
 FAIL  client/__tests__/demo.spec.js
  ● Test suite failed to run

    Configuration error:

    Could not locate module @/client/components/Navbar mapped as:
    C:\laragon\www\laravel-nuxt\src\$1.

    Please check your configuration for these entries:
    {
      "moduleNameMapper": {
        "/^@\/(.*)$/": "C:\laragon\www\laravel-nuxt\src\$1"
      },
      "resolver": undefined
    }

      1 | import { mount } from '@vue/test-utils'
      2 |
    > 3 | import Navbar from '@/client/components/Navbar'
        | ^
      4 |
      5 | test('Navbar', () => {
      6 |   // restitue le composant

      at createNoMappedModuleFoundError (node_modules/jest-resolve/build/index.js:551:17)
      at Object.<anonymous> (client/__tests__/demo.spec.js:3:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        3.972 s
Ran all test suites.

[EDIT] : the problem was in the jes.conf.js file, just had to remove the / in the line : "/^@/(.)$/" => "^@/(.)$".

0 Answers
Related