Unit testing Leaflet app with Karma, Jasmine and Webpack (vanilla ES6). `Uncaught Error: Map container not found`

Question

I'm developing a small mapping app with an straigh forward configuration. The dependencies of the app are Leaflet, for displaying the map, Webpack for building (and webpack-dev-server to hot reload), Babel and Karma and Jasmine for unit testing.
The app is written in vanilla JS implementing some kind of pub/sub pattern (dom events trigger some setters that update the state and notify map and DOM handler functions that update the view with the new state). This are Karma and Webpack config files.

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

The app gets fired from index.html that has a <script> tag that serves build/app.js
I trying to run some unit tests but I'm getting Uncaught Error: Map container not found and two warnings:

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

I'm only running this setters.spec.js file:

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

})

Notification functions triggers some methods inside mapHandler.js and DOMhandler.js which update the map and DOM values on index.js, but is evident that karma, nor webpack, does not know anything about index.js andcan not access to the <div id="map"></div> where map is displayed on the page.
I'm not really sure how to make karma aware of index.html to use while testing. I've been through some forums answers but I'm a little bit lost.
Of course I'm not a seasoned tester :_(
Any advice would be apreciated

Unit testing Leaflet app with Karma, Jasmine and Webpack (vanilla ES6). `Uncaught Error: Map container not found`

0 Answers0