Karma + Jasmine - 无法找到变量要求

时间:2018-01-10 15:33:52

标签: javascript unit-testing vue.js karma-jasmine karma-webpack

我正在尝试使用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)
  })
})

返回(我不允许在我的帖子上显示图像): Print screen of the terminal

但是当谈到测试我的组件时(所以当我需要它们时)它告诉我:

  

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文件

1 个答案:

答案 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
  })
})