我已经看到这个问题已经被问过很多次了，但在这种情况下，我认为它与我在 Vue 中所做的事情更相关的是我的 karma/webpack 配置。那是因为我只在使用 Karma 运行测试时收到警告（使用最新的 Chrome 无头），但在立即使用webpack-dev-server时我没有收到警告。
这是我从app/webpack.base.config.js文件开始的 conf：
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css/,
loader: 'style-loader!css-loader'
},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff'
},
{
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader'
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
};
应用程序/webpack.config.js
const path = require('path');
const webpack = require('webpack');
const mergeConfig = require('webpack-merge');
const baseConfig = require('./webpack.base.config');
module.exports = mergeConfig(baseConfig, {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
devServer: {
historyApiFallback: true,
noInfo: true,
hot: true
},
performance: {
hints: false
},
devtool: '#eval-source-map',
plugins: [
new webpack.HotModuleReplacementPlugin()
]
});
app/test/karma.conf.js（这里只使用webpack.base.config.js文件，而不是全部）
// Karma configuration
const webpackConfig = require('../webpack.base.config');
process.env.CHROME_BIN = require('puppeteer').executablePath();
module.exports = function (config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '.',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'./index.js'
],
// list of files to exclude
exclude: [],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'./index.js': ['webpack']
},
// karma watches the test entry points
// (you don't need to specify the entry option)
// webpack watches dependencies
webpack: webpackConfig,
webpackMiddleware: {
noInfo: true
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['spec'],
// web server port
port: 8080,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['ChromeHeadlessNoSandbox'],
customLaunchers: {
ChromeHeadlessNoSandbox: {
base: 'ChromeHeadless',
flags: ['--no-sandbox']
}
},
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
// Concurrency level
// how many browser should be started simultaneous
concurrency: 1
});
};
应用程序/测试/index.js
import Vue from 'vue';
Vue.config.productionTip = false;
// require all test files (files that ends with .js)
const testsContext = require.context('./specs', true, /\.js/);
testsContext.keys().forEach(testsContext);
然后在我的规范中安装组件时收到警告，如下所示：
import Vue from 'vue';
import Extractor from './../../../src/components/Extractor.vue';
describe('Extractor component', () => {
it('sets the correct default data', () => {
const component = new Vue(Extractor).$mount();
expect(component.url).toBe('');
expect(component.responseCode).toBe(null);
expect(component.body).toBe(null);
expect(component.errorMessage).toBe(null);
});
});
警告：仅在以下情况下才会发生这种情况：
- 我使用vue-class-component库
- 我的组件继承自另一个
- 通过 Karma/Chrome 无头运行代码时
我在日志中得到的错误是：
[Vue 警告]：属性或方法“有效”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保该属性是反应性的，无论是在数据选项中，还是对于基于类的组件。请参阅：https ://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties 。
它抱怨的“有效”属性在ApiComponent类内部（基本上是父类）。
这是给我警告的组件之一：
import http from './../modules/http';
import ApiComponent from './sub/ApiComponent';
import Component from 'vue-class-component';
// @see https://github.com/vuejs/vue-class-component
// @see https://github.com/wycats/javascript-decorators/blob/master/README.md
@Component()
export default class Extractor extends ApiComponent {
url = '';
sendRequest() {
return new Promise((resolve, reject) => {
// some AJAX call here
});
}
}
如果不是Extractor从ApiComponent我扩展类，而是将所有代码Vue复制并粘贴到类中，那么警告就会消失。重点是......为什么我只有在通过 Karma 运行代码时才会收到警告？ApiComponentExtractor