Question

我正在尝试在webpack + karma背景上执行react + redux的jasmine测试用例。但低于错误

下面我添加了webpack，karma config和react + 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';

TypeError：无法读取未定义的属性“contextTypes”（karma + jasmine + reactRedux + webpack）

1 个答案: