Karma + Jasmine - 找不到变量要求

Question

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

which return（我还不能在我的 post 上显示图像）：

但是当涉及到测试我的组件时（所以当我需要它们时）它对我说：

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR ReferenceError: Can't find variable: require at 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 文件

Answer 1

我设法让它工作，所以我 post 我的配置文件在这里，它可能会有所帮助。

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
    }
  });
};

一些基本测试：

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

Karma + Jasmine - 找不到变量要求

Karma + Jasmine - Can't find variable require

javascript

unit-testing

karma-jasmine

vue.js

karma-webpack