业力测试Lodash未加载引用它的组件

时间:2018-12-14 13:11:24

标签: angular lodash karma-webpack

我有一个使用Lodash的Angular5应用程序,这些都可以通过WebPack正常运行(它的Angular5可以使WebPack不能使用Angular Cli)。

我在测试时收到错误消息:

  

TypeError:无法读取未定义的属性'isNil'

这是一个Angular 5项目,我使用WebPack,在运行业力之前的输出显示lodash被很好地捆绑了。

            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} [内置] [33] ./node_modules/@angular/core/esm5/testing.js 47.4   kB {0} [内置] [114] ./node_modules/rxjs/Rx.js 9.79 kB {0} [内置]   [473] ./config/spec-bundle.js 2.05 kB {0} [内置] [475]   ./node_modules/core-js/es6/index.js 5.88 kB {0} [内置] [620]   ./node_modules/core-js/es7/reflect.js 510字节{0} [内置] [631]   ./node_modules/zone.js/dist/zone.js 126 kB {0} [内置] [632]   ./node_modules/zone.js/dist/long-stack-trace-zone.js 6.22 kB {0}   [内置] [633] ./node_modules/zone.js/dist/proxy.js 5.6 kB {0} [内置]   [634] ./node_modules/zone.js/dist/sync-test.js 1.41 kB {0} [内置]   [635] ./node_modules/zone.js/dist/jasmine-patch.js 6.36 kB {0} [内置]   [636] ./node_modules/zone.js/dist/async-test.js 3.23 kB {0} [内置]   [637] ./node_modules/zone.js/dist/fake-async-test.js 17 kB {0} [内置]   [910] ./node_modules/@angular/platform-b​​rowser-dynamic/esm5/testing.js   17.8 kB {0} [内置]

还可以使用

将其正确导入组件中

import _ from 'lodash'

我的webpack配置在这里:

/**
* @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
   }

 };
}

还有其他导入Lodash的方法吗?

欢呼 KH

1 个答案:

答案 0 :(得分:1)

我通过将lodash添加到karma.conf.js文件的部分中来解决了这个问题。下面是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'
      ],

您可能还需要编辑 tsconfig.spec.ts 文件,以在下面也包含"esModuleInterop": true,以便可以使用import _ from 'lodash';代替import * as _ from 'lodash';

tsconfig.spec.ts

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

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