Karma + Jasmine - 找不到变量要求答案

【问题标题】：Karma + Jasmine - Can't find variable requireKarma + Jasmine - 找不到变量要求
【发布时间】：2018-01-10 15:33:51
【问题描述】：

我正在尝试使用 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：找不到变量：需要在 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 文件

【问题讨论】：

您使用的是karma-browserify，但您将预处理器设置为webpack 而不是browserify，有什么原因吗？
是的，后来我看到了，我正在使用我在网上看到的拼凑而成，现在修复它并将其移至 webpack，但这仍然不起作用。

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

【解决方案1】：

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

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

【讨论】：