TypeError：未定義の 'contextTypes'プロパティを読み込めません（karma + jasmine + reactRedux + webpack）

Question

webpack +カルマのバックグラウンドでreact + reduxのジャスミンテストケースを実行しようとしています。 しかし、エラーI以下

の下になってはWebPACKの、カルマの設定とコンポーネントファイルをReduxの+反応が追加されました。

-

1] karma.config.js

var webpackConfig = require('./webpack.config.js'); 
module.exports = function(config) { 
    config.set({ 
     basePath: '', 
     frameworks: ['jasmine'], 
    files: [ 
     'app/assets/test/**/*Spec.js', 
     'app/assets/test/**/*Spec.jsx' 
    ], 
preprocessors: { 
    'app/assets/test/**/*Spec.js': ['webpack'], 
    'app/assets/test/**/*Spec.jsx': ['webpack'] 
}, 

webpack: webpackConfig, 
reporters: ['kjhtml'], 
port: 9876, 
colors: true, 
config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG 
logLevel: config.LOG_INFO, 
autoWatch: true, 
browsers: ['Chrome'], 
singleRun: true, 
concurrency: Infinity 

}）}

2] home.jsx成分を

import CarouselContainer from 'containers/carouselContainer' 
import CurrentTracks from 'containers/currentTracks' 

export default class Home extends React.Component { 
    render() { 
    return (
     <div> 
     <CarouselContainer /> 
     <CurrentTracks /> 
     </div> 
    ) 
    } 
} 

3] home.Spec.jsxを反応します

import React from 'react'; 
import { shallow } from 'enzyme'; 
import ReactTestUtils from 'react-addons-test-utils' 
import {Home} from 'pages/home' 

describe("User suite", function() { 
    const wrapper = shallow(<Home/>); 
    expect(wrapper.length).toEqual(1); 
}); 

4] Webpack.config.js -

 var path = require('path'); 
     var webpack = require('webpack'); 
     var HtmlWebpackPlugin = require('html-webpack-plugin'); 
     var autoprefixer = require('autoprefixer'); 
     var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
     var merge = require('webpack-merge'); 
     var CopyWebpackPlugin = require('copy-webpack-plugin'); 

     var BUILD = path.join(__dirname, 'build'); 
     var APP = path.join(__dirname, 'app'); 
     var JS = path.join(APP, 'assets', 'javascript'); 
     var env = process.env.NODE_ENV; 

     console.log('Webpack env: ' + env) 

     var sassLoaders = [ 
     'css-loader', 
     'postcss-loader', 
     'sass-loader?indentedSyntax=sass&includePaths[]=' + APP 
     ]; 

     var commonConfig = { 
     entry: [ path.join(JS, 'index.jsx') ], 
     module: { 
      loaders: [ 
       { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel-loader'] }, 
       { test: /\.css/, loader: 'style-loader!css-loader?name=assets/css/[name]-[hash].[ext]' }, 
       { test: /\.png|jpg|gif$/, loader: 'file-loader?name=assets/images/[name]-[hash].[ext]' }, 
       { test: /\.xlsx$/, loader: 'file-loader?name=assets/file/[name].[ext]' }, 
       { test: /\.sass$/, loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!')) }, 
       { test: /\.(woff|woff2|svg|ttf|eot|ico)$/, loader: 'file-loader?name=assets/fonts/[name].[ext]' } 
      ] 
     }, 
     output: { 
      filename: 'assets/javascript/[name]-[hash].js', 
      path: BUILD, 
      publicPath: '/' 
     }, 
     externals: { 
      'jsdom': 'window', 
      'cheerio': 'window', 
      'react/lib/ExecutionEnvironment': true, 
      'react/addons': true, 
      'react/lib/ReactContext': 'window' 
     }, 
     plugins: [ 
      new HtmlWebpackPlugin({ 
       template: 'app/index.html', 
       inject: 'body', 
       filename: 'index.html', 
       favicon: path.join(APP, 'assets', 'images', 'favicon.ico') 
      }), 
      new ExtractTextPlugin('assets/stylesheet/[name]-[hash].min.css'), 
      new CopyWebpackPlugin([ 
       { from: path.join(APP,'assets/javascript/vendor'), to: 'assets/vendor' } 
      ]), 
      new CopyWebpackPlugin([ 
       { from: path.join(APP,'assets/test'), to: 'assets/test' } 
      ]), 
      new webpack.ProvidePlugin({ 
       React: "react", 
       "_": "lodash" 
      }) 
     ], 
     postcss: [ 
      autoprefixer({ 
       browsers: ['last 2 versions'] 
      }) 
     ], 
     resolve: { 
      root: path.join(APP, 'assets'), 
      alias: { 
       config: '../../../../configs', 
       images: 'images', 
       actions: 'javascript/actions', 
       containers: 'javascript/containers', 
       components: 'javascript/components', 
       common: 'components/common', 
       constants: 'javascript/constants', 
       javascript: 'javascript', 
       layout: 'components/layout', 
       mywagers: 'pages/myWagers', 
       pages: 'components/pages', 
       home: 'pages/home', 
       utility: 'javascript/utility', 
       wagers: 'pages/wagers', 
       sheets: 'wagers/betPad/sheets' 
      }, 
      extensions: ['', '.js', '.jsx', '.sass'], 
      modulesDirectories: ['app', 'node_modules'] 
     } 
     }; 

     var devConfig = { 
     devtool: 'inline-source-map', 
     entry: ['webpack-hot-middleware/client?reload=true'], 
     plugins: [ 
      new webpack.optimize.OccurenceOrderPlugin(), 
      new webpack.HotModuleReplacementPlugin(), 
      new webpack.NoErrorsPlugin(), 
      new webpack.DefinePlugin({ 
       'process.env.NODE_ENV': JSON.stringify(env || 'development') 
      }) 
     ], 
     module: { 
      postLoaders: [ 
       { 
        test: /\.js$/, 
        exclude: [/node_modules/,/vendor/], 
        loader: "jshint-loader" 
       } 
      ] 
     } 
     }; 

     var prodConfig = { 
     plugins: [ 
      new webpack.optimize.UglifyJsPlugin({ 
       compress: { 
        warnings: false 
       } 
      }), 
      new webpack.DefinePlugin({ 
       'process.env.NODE_ENV': JSON.stringify(env || 'production') 
      }) 
     ] 
     }; 

     var config; 

     switch (env) { 
     case 'development': 
      config = merge(devConfig, commonConfig); 
      break; 
     default: 
      config = merge(prodConfig, commonConfig); 
      break; 
     } 

     module.exports = config; 

Answer 1

Homeは、デフォルトのエクスポートであるようにライン4上の仕様では、デフォルトとしてインポートする必要があるので、それは、見えます。

ので、ラインが

import Home from 'pages/home';

代わりの

import {Home} from 'pages/home';