[WEBPACK] module not found pour webpack en test mais pas pour vue-cli en dev
Salut à tous,
Je possède un projet en Vue.js sur lequel je souhaiterais mettre en place des tests unitaires des composants de vue.js.
Mon application marche très bien. Elle est dockerisé et utilise vue-cli pour fournir l’exécution du code en dev (à travers vue-cli-service serve)
Maintenant j'essaie de mettre Webpack en place sur le projet afin de fournir un environnement pour lancé des tests en local comme expliqué par vue.js ici :
Test unitaires vue.js
Lorsque je lance ma commande qui correspond au paramétrage suivant :
Code:
mochapack --webpack-config webpack.config.js --require test/setup.js test/**/*.spec.js
Webpack génère des erreurs lors du chargement d'un composant vue qui charge d'autres composants comme ceci :
Code:
import AppButton from '../components/Button'
en mentionnant : "Module not found: '../components/Button' in '/Users/xxxx/Sites/xxxx/xxxxx/xxxxxx/src/page'"
Le fichier qui génère ces erreurs est effectivement dans le dossier page. Mais j'ai besoin de charger d'autres composants vue.js qui se trouve ailleurs dans l'arborescence que voici :
projet
---- dist
---- node_modules
---- public
---- src
---- ---- assets
---- ---- components
---- ---- ----- Button.vue
---- ---- mixins
---- ---- page
---- ---- ----- Home.vue
---- main.js
---- test
package.json
webpack.config.js
Ainsi j'essaie d'écrire un test pour le composant Home.vue qui cherche à charger le composant Button.vue qu'il ne trouve pas (uniquement en test car en dev tout fonctionne parfaitement).
Voici mon fichier de configuration webpack :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
const nodeExternals = require('webpack-node-externals')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const path = require('path')
module.exports = {
externals: [nodeExternals()],
devtool: 'inline-cheap-module-source-map',
entry: './main.js',
context: path.resolve(__dirname+'/src', 'src'),
resolve: {
modules: [path.resolve(__dirname, 'src'), 'node_modules']
},
module: {
rules: [
{test: /\.vue$/, loader: 'vue-loader'},
{test: /\.scss$/, use: [{loader: 'style-loader'}, {loader: 'css-loader'}, {loader: 'sass-loader'}]}
]
},
plugins: [
new VueLoaderPlugin()
],
} |
Auriez-vous des pistes afin de mieux comprendre pourquoi cela ne fonctionne pas svp ?
Merci pour votre éclairage.
