Karma test Lodash not loading in components that reference it

Question

I have an Angular5 application that uses Lodash, this all works fine via WebPack (its Angular5 so WebPack not Angular Cli).

I receive an error when testing:

TypeError: Cannot read property 'isNil' of undefined

This is an Angular 5 project, which I use WebPack and the output before karma runs shows lodash is being bundled in fine.

            Asset     Size  Chunks                    Chunk Names config/spec-bundle.js  19.4 MB       0  [emitted]  [big] 

config/spec-bundle.js [27] ./node_modules/lodash/lodash.js 540 kB {0} [built] [33] ./node_modules/@angular/core/esm5/testing.js 47.4 kB {0} [built] [114] ./node_modules/rxjs/Rx.js 9.79 kB {0} [built] [473] ./config/spec-bundle.js 2.05 kB {0} [built] [475] ./node_modules/core-js/es6/index.js 5.88 kB {0} [built] [620] ./node_modules/core-js/es7/reflect.js 510 bytes {0} [built] [631] ./node_modules/zone.js/dist/zone.js 126 kB {0} [built] [632] ./node_modules/zone.js/dist/long-stack-trace-zone.js 6.22 kB {0} [built] [633] ./node_modules/zone.js/dist/proxy.js 5.6 kB {0} [built] [634] ./node_modules/zone.js/dist/sync-test.js 1.41 kB {0} [built] [635] ./node_modules/zone.js/dist/jasmine-patch.js 6.36 kB {0} [built] [636] ./node_modules/zone.js/dist/async-test.js 3.23 kB {0} [built] [637] ./node_modules/zone.js/dist/fake-async-test.js 17 kB {0} [built] [910] ./node_modules/@angular/platform-browser-dynamic/esm5/testing.js 17.8 kB {0} [built]

Also it's correctly imported in the component using

import _ from 'lodash'

My webpack config is here:

/**
* @author: @AngularClass
*/

const helpers = require('./helpers');

/**
* Webpack Plugins
*/
const ProvidePlugin = require('webpack/lib/ProvidePlugin');
const DefinePlugin = require('webpack/lib/DefinePlugin');
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
const webpack = require('webpack');

/**
* Webpack Constants
*/
const ENV = process.env.ENV = process.env.NODE_ENV = 'test';

/**
* Webpack configuration
*
* See: http://webpack.github.io/docs/configuration.html#cli
*/
module.exports = function (options) {
 return {

   /**
    * Source map for Karma from the help of karma-sourcemap-loader &  karma-webpack
    *
    * Do not change, leave as is or it wont work.
    * See: https://github.com/webpack/karma-webpack#source-maps
    */
   devtool: 'inline-source-map',

   /**
    * Options affecting the resolving of modules.
    *
    * See: http://webpack.github.io/docs/configuration.html#resolve
    */
   resolve: {

     /**
      * An array of extensions that should be used to resolve modules.
      *
      * See: http://webpack.github.io/docs/configuration.html#resolve-extensions
      */
     extensions: ['.ts', '.js'],

     /**
      * Make sure root is src
      */
     modules: [helpers.root('src'), 'node_modules']

   },

   /**
    * Options affecting the normal modules.
    *
    * See: http://webpack.github.io/docs/configuration.html#module
    *
    * 'use:' revered back to 'loader:' as a temp. workaround for #1188
    * See: https://github.com/AngularClass/angular-starter/issues/1188#issuecomment-262872034
    */
   module: {

     rules: [

       /**
        * Source map loader support for *.js files
        * Extracts SourceMaps for source files that as added as sourceMappingURL comment.
        *
        * See: https://github.com/webpack/source-map-loader
        */
       {
         enforce: 'pre',
         test: /\.js$/,
         loader: 'source-map-loader',
         exclude: [
           /**
            * These packages have problems with their sourcemaps
            */
           helpers.root('node_modules/rxjs'),
           helpers.root('node_modules/@angular')
         ]
       },

       /**
        * Typescript loader support for .ts and Angular 2 async routes via .async.ts
        *
        * See: https://github.com/s-panferov/awesome-typescript-loader
        */
       {
         test: /\.ts$/,
         use: [
           {
             loader: 'awesome-typescript-loader',
             query: {
               /**
                * Use inline sourcemaps for "karma-remap-coverage" reporter
                */
               sourceMap: false,
               inlineSourceMap: true,
               compilerOptions: {

                 /**
                  * Remove TypeScript helpers to be injected
                  * below by DefinePlugin
                  */
                 removeComments: true

               }
             },
           },
           'angular2-template-loader'
         ],
         exclude: [/\.e2e\.ts$/]
       },

       /**
        * Raw loader support for *.css files
        * Returns file content as string
        *
        * See: https://github.com/webpack/raw-loader
        */
       {
         test: /\.css$/,
         loader: ['to-string-loader', 'css-loader'],
         exclude: [helpers.root('src/index.html')]
       },

       /**
        * Raw loader support for *.scss files
        *
        * See: https://github.com/webpack/raw-loader
        */
       {
           test: /\.scss$/,
           loader: ['raw-loader', 'sass-loader'],
           exclude: [helpers.root('src/index.html')]
       },

       /**
        * Raw loader support for *.html
        * Returns file content as string
        *
        * See: https://github.com/webpack/raw-loader
        */
       {
         test: /\.html$/,
         loader: 'raw-loader',
         exclude: [helpers.root('src/index.html')]
       },

       /**
        * Instruments JS files with Istanbul for subsequent code coverage reporting.
        * Instrument only testing sources.
        *
        * See: https://github.com/deepsweet/istanbul-instrumenter-loader
        */
       {
         enforce: 'post',
         test: /\.(js|ts)$/,
         loader: 'istanbul-instrumenter-loader',
         include: helpers.root('src'),
         exclude: [
           /\.(e2e|spec)\.ts$/,
           /node_modules/
         ]
       }

     ]
   },

   /**
    * Add additional plugins to the compiler.
    *
    * See: http://webpack.github.io/docs/configuration.html#plugins
    */
   plugins: [
    new webpack.ProvidePlugin({
      jQuery: 'jquery',
      $: 'jquery',
      jquery: 'jquery',
      'window.jQuery': 'jquery'}),
     /**
      * Plugin: DefinePlugin
      * Description: Define free variables.
      * Useful for having development builds with debug logging or adding global constants.
      *
      * Environment helpers
      *
      * See: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
      *
      * NOTE: when adding more properties make sure you include them in custom-typings.d.ts
      */
     new DefinePlugin({
       'ENV': JSON.stringify(ENV),
       'HMR': false,
       'process.env': {
         'ENV': JSON.stringify(ENV),
         'NODE_ENV': JSON.stringify(ENV),
         'HMR': false,
       }
     }),

     /**
      * Plugin: ContextReplacementPlugin
      * Description: Provides context to Angular's use of System.import
      *
      * See: https://webpack.github.io/docs/list-of-plugins.html#contextreplacementplugin
      * See: https://github.com/angular/angular/issues/11580
      */
     new ContextReplacementPlugin(
       /**
        * The (\\|\/) piece accounts for path separators in *nix and Windows
        */
       /angular(\\|\/)core(\\|\/)@angular/,
       helpers.root('src'), // location of your src
       {
         /**
          * your Angular Async Route paths relative to this root directory
          */
       }
     ),

     /**
      * Plugin LoaderOptionsPlugin (experimental)
      *
      * See: https://gist.github.com/sokra/27b24881210b56bbaff7
      */
     new LoaderOptionsPlugin({
       debug: false,
       options: {
         /**
          * legacy options go here
          */
       }
     }),

   ],

   /**
    * Disable performance hints
    *
    * See: https://github.com/a-tarasyuk/rr-boilerplate/blob/master/webpack/dev.config.babel.js#L41
    */
   performance: {
     hints: false
   },

   /**
    * Include polyfills or mocks for various node stuff
    * Description: Node configuration
    *
    * See: https://webpack.github.io/docs/configuration.html#node
    */
   node: {
     global: true,
     process: false,
     crypto: 'empty',
     module: false,
     clearImmediate: false,
     setImmediate: false
   }

 };
}

Is there another way I can import Lodash?

Cheers KH

Answer 1

I solved this problem by adding lodash to karma.conf.js file's section. Below is an example of what it should look like with lodash@4.17.11.

karma.conf.js

module.exports = function(config) {
config.set({
      basePath: '',
      frameworks: ['jasmine', '@angular/cli'],
      files: [
        'node_modules/lodash/lodash.min.js'
      ],

You may also need to edit your tsconfig.spec.ts file to include "esModuleInterop": true below as well so you can use import _ from 'lodash'; instead of import * as _ from 'lodash';:

tsconfig.spec.ts

{
    "extends": "../tsconfig.json",
    "compilerOptions": {
        "esModuleInterop": true
    }
}

ref: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/19153