[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 : "/^@/(.)$/" => "^@/(.)$".