Q&A
test/unit/karma.conf.jsも追記いただけますか？
前提・実現したいこと
書籍「Vue.js入門: 基礎から実践アプリケーション開発まで」の10.2 コンポーネントの実装にて、KbnButtonコンポーネントのテストコードとコンポーネント実装を行いましたが、npm run unitを実行時に"Error: Cannot find module "vue""が表示されます。
エラーなくunittestを実行できるようにしたく、助言いただきたく思います。
発生している問題・エラーメッセージ
ERROR in /Users/XXXXX/node_modules/@vue/test-utils/dist/vue-test-utils.js Module not found: Error: Can't resolve 'vue' in '/Users/XXXXX/node_modules/@vue/test-utils/dist' @ /Users/XXXXX/node_modules/@vue/test-utils/dist/vue-test-utils.js 3:0-21 9:26-40 @ ./test/unit/specs/components/atoms/KbnButton.spec.js @ ./test/unit/specs .spec$ @ ./test/unit/index.js 12 08 2020 22:48:19.963:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/ 12 08 2020 22:48:19.965:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency 12 08 2020 22:48:19.973:INFO [launcher]: Starting browser PhantomJS 12 08 2020 22:48:21.965:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket FEMU03D8QyG5g6ZsAAAA with id 33104596 PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR Error: Cannot find module "vue" at webpack:///Users/XXXXX/node_modules/@vue/test-utils/dist/vue-test-utils.js:1:0 <- index.js:13148 PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 0 of 0 ERROR (0.372 secs / 0 secs) PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 0 of 0 ERROR (0.001 secs / 0 secs)
試したこと
- node_modulesの削除と、npm installの再実行
補足情報（FW/ツールのバージョンなど）
node --version: v10.22.0 ※anyenv, nodenvでバージョン管理
npm --version: 6.14.7
vue --version: @vue/cli 4.4.6
package.jsonの中身
{ "name": "kanban-app", "version": "1.0.0", "description": "A kanban Application", "author": "XXXXX", "private": true, "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run", "e2e": "node test/e2e/runner.js", "test": "npm run unit && npm run e2e", "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs", "build": "node build/build.js" }, "dependencies": { "vue": "^2.5.2", "vue-router": "^3.0.1" }, "devDependencies": { "autoprefixer": "^7.1.2", "babel-core": "^6.22.1", "babel-eslint": "^8.2.1", "babel-helper-vue-jsx-merge-props": "^2.0.3", "babel-loader": "^7.1.1", "babel-plugin-istanbul": "^4.1.1", "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-runtime": "^6.22.0", "babel-plugin-transform-vue-jsx": "^3.5.0", "babel-preset-env": "^1.3.2", "babel-preset-stage-2": "^6.22.0", "babel-register": "^6.22.0", "chai": "^4.1.2", "chalk": "^2.0.1", "chromedriver": "^2.27.2", "copy-webpack-plugin": "^4.0.1", "cross-env": "^5.0.1", "cross-spawn": "^5.0.1", "css-loader": "^0.28.0", "eslint": "^4.15.0", "eslint-config-standard": "^10.2.1", "eslint-friendly-formatter": "^3.0.0", "eslint-loader": "^1.7.1", "eslint-plugin-import": "^2.7.0", "eslint-plugin-node": "^5.2.0", "eslint-plugin-promise": "^3.4.0", "eslint-plugin-standard": "^3.0.1", "eslint-plugin-vue": "^4.0.0", "extract-text-webpack-plugin": "^3.0.0", "file-loader": "^1.1.4", "friendly-errors-webpack-plugin": "^1.6.1", "html-webpack-plugin": "^2.30.1", "inject-loader": "^3.0.0", "karma": "^1.4.1", "karma-coverage": "^1.1.1", "karma-mocha": "^1.3.0", "karma-phantomjs-launcher": "^1.0.2", "karma-phantomjs-shim": "^1.4.0", "karma-sinon-chai": "^1.3.1", "karma-sourcemap-loader": "^0.3.7", "karma-spec-reporter": "0.0.31", "karma-webpack": "^2.0.2", "mocha": "^3.2.0", "nightwatch": "^0.9.12", "node-notifier": "^5.1.2", "optimize-css-assets-webpack-plugin": "^3.2.0", "ora": "^1.2.0", "phantomjs-prebuilt": "^2.1.14", "portfinder": "^1.0.13", "postcss-import": "^11.0.0", "postcss-loader": "^2.0.8", "postcss-url": "^7.2.1", "rimraf": "^2.6.0", "selenium-server": "^3.0.1", "semver": "^5.3.0", "shelljs": "^0.7.6", "sinon": "^4.0.0", "sinon-chai": "^2.8.0", "uglifyjs-webpack-plugin": "^1.1.1", "url-loader": "^0.5.8", "vue-loader": "^13.3.0", "vue-style-loader": "^3.0.1", "vue-template-compiler": "^2.5.2", "webpack": "^3.6.0", "webpack-bundle-analyzer": "^2.9.0", "webpack-dev-server": "^2.9.1", "webpack-merge": "^4.1.0" }, "engines": { "node": ">= 6.0.0", "npm": ">= 3.0.0" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] }
/test/unit/karma.conf.jsの中身
// This is a karma config file. For more details see // http://karma-runner.github.io/0.13/config/configuration-file.html // we are also using it with karma-webpack // https://github.com/webpack/karma-webpack var webpackConfig = require('../../build/webpack.test.conf') module.exports = function karmaConfig (config) { config.set({ // to run in additional browsers: // 1. install corresponding karma launcher // http://karma-runner.github.io/0.13/config/browsers.html // 2. add it to the `browsers` array below. browsers: ['PhantomJS'], frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'], reporters: ['spec', 'coverage'], files: [ '../../node_modules/es6-promise/dist/es6-promise.auto.js', './index.js' ], preprocessors: { './index.js': ['webpack', 'sourcemap'] }, webpack: webpackConfig, webpackMiddleware: { noInfo: true }, coverageReporter: { dir: './coverage', reporters: [ { type: 'lcov', subdir: '.' }, { type: 'text-summary' } ] } }) }
/build/webpack.test.conf.jsの中身
'use strict' // This is the webpack config used for unit tests. const utils = require('./utils') const webpack = require('webpack') const merge = require('webpack-merge') const baseWebpackConfig = require('./webpack.base.conf') const webpackConfig = merge(baseWebpackConfig, { // use inline sourcemap for karma-sourcemap-loader module: { rules: utils.styleLoaders() }, devtool: '#inline-source-map', resolveLoader: { alias: { // necessary to to make lang="scss" work in test when using vue-loader's ?inject option // see discussion at https://github.com/vuejs/vue-loader/issues/724 'scss-loader': 'sass-loader' } }, plugins: [ new webpack.DefinePlugin({ 'process.env': require('../config/test.env') }) ] }) // no need for app entry during tests delete webpackConfig.entry module.exports = webpackConfig
/build/webpack.base.conf.jsの中身
'use strict' const path = require('path') const utils = require('./utils') const config = require('../config') const vueLoaderConfig = require('./vue-loader.conf') function resolve (dir) { return path.join(__dirname, '..', dir) } const createLintingRule = () => ({ test: /.(js|vue)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter'), emitWarning: !config.dev.showEslintErrorsInOverlay } }) module.exports = { context: path.resolve(__dirname, '../'), entry: { app: './src/main.js' }, output: { path: config.build.assetsRoot, filename: '[name].js', publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath }, resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), } }, module: { rules: [ ...(config.dev.useEslint ? [createLintingRule()] : []), { test: /.vue$/, loader: 'vue-loader', options: vueLoaderConfig }, { test: /.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] }, { test: /.(png|jpe?g|gif|svg)(?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('media/[name].[hash:7].[ext]') } }, { test: /.(woff2?|eot|ttf|otf)(?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } } ] }, node: { // prevent webpack from injecting useless setImmediate polyfill because Vue // source contains it (although only uses it if it's native). setImmediate: false, // prevent webpack from injecting mocks to Node native modules // that does not make sense for the client dgram: 'empty', fs: 'empty', net: 'empty', tls: 'empty', child_process: 'empty' } }
ご連絡ありがとうございます、追記しました。
ありがとうございます。webpack.test.confもいただけますか？
上記も追記しました。
ありがとうございます。たびたびすみませんが、webpack.base.con、もいただけますか？
いえ、ご確認ありがとうございます。追加しました。
あなたの回答
tips
プレビュー
