Question

我正在开发一个具有直线前向配置的小型地图应用。应用程序的依赖项是Leaflet，用于显示地图，Webpack用于构建（和webpack-dev-server到热重新加载），Babel和Karma以及Jasmine用于单元测试。
该应用程序是用vanilla JS编写的，实现某种发布/子模式（dom事件触发一些更新状态的setter，并通知map和DOM处理函数，用新状态更新视图）。这是Karma和Webpack配置文件。

karma.conf.js

var webpackConfig = require('./webpack.config.js')

module.exports = function(config) {
  config.set({


    basePath: '',

    frameworks: ['jasmine'],

    files: [
      'index.html',
      './test/spec/*.spec.js'
    ],


    plugins: [
      'karma-chrome-launcher',
      'karma-jasmine',
      'karma-webpack'
    ],


    preprocessors: {
      'test/spec/*.spec.js': ['webpack']
    },

    webpack: webpackConfig,

    reporters: ['progress'],


    // web server port
    port: 9876,
    colors: true,

    logLevel: config.LOG_INFO,

    autoWatch: true,

    browsers: ['Chrome'],

    singleRun: false,

    concurrency: Infinity
  })
}

webpack.config.js

module.exports = {
  resolve: {
    extensions: ['.js', '.html', '.css']
  },
  context: __dirname,
  entry: {
    app:['./index.js']
  },
  output: {
    path: __dirname +'/build',
    filename: 'app.js',
    publicPath: '/build/'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      }
    ]
  },
  devServer: {
    host: 'localhost',
    port: 8080
  }
}

该应用从index.html点击，其<script>代码为build/app.js提供服务我尝试运行一些单元测试，但我得到了Uncaught Error: Map container not found和两个警告：

26 11 2017 21:19:51.778:WARN [web-server]: 404: /css/general.css
26 11 2017 21:19:51.779:WARN [web-server]: 404: /build/app.js

我只运行此setters.spec.js文件：

'use strict'

import {state} from '../../modules/store.js'
import {setHue} from '../../modules/setters.js'
import {notifyBaseHueChange} from '../../modules/eventBus.js'


describe("Setters", function() {

  it("setHue should update state baseHue and notify the change", 
  function() {
    var hue = 120
    setHue(hue)
    expect(state.baseHue).toEqual(hue)
  })

})

通知函数触发mapHandler.js和DOMhandler.js内部的一些方法，这些方法更新了index.js上的地图和DOM值，但很明显，业力，也不是webpack，对{{{{{{ 1}}并且无法访问页面上显示地图的index.js 我不确定如何让业力知道<div id="map"></div>在测试时使用。我已经通过了some forums answers，但我有点迷失了。
当然，我不是一个经验丰富的测试人员：_（
任何建议都是apreciated

与Karma，Jasmine和Webpack（vanilla ES6）一起测试Leaflet应用程序。 `未捕获错误：未找到地图容器`

0 个答案: