我正在尝试使用karma和jasmine在我的VueJS项目中实现一些测试。我可以启动基本测试,例如:
describe('canary', function () {
// asserting JavaScript options
it('should run', function () {
expect(true).toBe(true)
})
it('should run 2', function () {
expect(false).toBe(false)
})
})
返回(我不允许在我的帖子上显示图像):
但是当谈到测试我的组件时(所以当我需要它们时)它告诉我:
PhantomJS 2.1.1(Mac OS X 0.0.0)错误 ReferenceError:找不到变量:require 在history.spec.js:1
这是我的karma.conf.js:
module.exports = function(config) {
var tests = './**/*.js';
config.set({
frameworks: ['jasmine'],
files: [tests],
reporters: ['dots'],
singleRun: true,
autoWatch: false,
browsers: ['PhantomJS'],
preprocessors: {
tests: ['webpack'],
'../src/main.js': ['webpack']
},
webpack: {
module: {
loaders: [
{ test: /\.js/, exclude: /node_modules/, loader: 'babel-loader' }
]
},
watch: true
},
webpackServer: {
noInfo: true
}
});
};
这是我的测试文件:
var Vue = require('vue')
var ComponentA = require('../src/Log.vue')
describe('Log.vue', function () {
// asserting JavaScript options
it('should have correct message', function () {
expect(ComponentA.data().msg).toBe('Hello from Log!')
})
})
编辑 - 新的karma.conf.js文件
答案 0 :(得分:1)
I managed to make it work, so i post my config files here, it might help.
webpack.test.config.js:
const path = require('path')
module.exports = {
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?.*$|$)/,
loader: 'file-loader?name=assets/[name].[hash].[ext]'
},
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015']
},
include: [
path.resolve(__dirname, '../')
],
exclude: /node_modules/
},
],
rules: [
{
// Maybe just use vue-loader on html template files in components directory only
// Like /components\/.*\.html$/
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?.*$|$)/,
loader: 'file-loader?name=assets/[name].[hash].[ext]'
},
]
},
resolve: {
extensions: ['.js', '.vue']
}
}
karma.conf.js
module.exports = function(config) {
var tests = '*.js';
config.set({
frameworks: ['jasmine'],
files: [tests],
reporters: ['dots'],
singleRun: true,
autoWatch: false,
browsers: ['PhantomJS'],
preprocessors: {
tests: ['webpack'],
'../src/main.js': ['webpack']
},
webpack: {
module: {
loaders: [
{ test: /\.js/, exclude: /node_modules/, loader: 'babel-loader' }
]
},
watch: true
},
webpackServer: {
noInfo: true
}
});
};
Some basic test:
import { expect } from 'chai'
describe('canary', function () {
// asserting JavaScript options
it('should run', function () {
expect(true).to.be.true
})
it('should run 2', function () {
expect(false).to.be.false
})
})