2016-01-08 6 views
8

Ich verwende webpack + babel für eine React + Redux-App und Mocha + Karma zum Testen. Die Redux-Testfälle werden korrekt ausgeführt. Jedoch wenn ich versuche, DOM-Tests zu tun mit reagieren-addons-Test-utils und läuft es mit Karma gibt es diesen FehlerKarma + Mocha + Reagieren Konvertieren eines Symbolwerts in eine Zeichenfolge nicht möglich

Uncaught Typeerror: kann ein Symbol Wert in einen String bei http://localhost:9876/karma.js:339

Um konvertieren richtig habe ich ein paar Holzfällern in Karma lib Dateien zu debuggen es (ich weiß, dass ich nicht haben sollte) und erhielt diese

Karma Error for React DOM testing

Allerdings, wenn ich versuche nicht KarmaJS verwenden und einfach die Tests laufen Es scheint in Ordnung zu sein. Hier ist meine karma.conf

"use strict"; 
let webpackConfig = require('./webpack.config'); 
const coverage = process.env.COVERAGE; 

webpackConfig.externals = {}; 

getWebpackLoaders(); 

module.exports = function(config){ 
    config.set({ 
    basePath: '.', 
    frameworks:['mocha'], 
    autoWatchBatchDelay:500, 
    browsers: ['Chrome'], 
    customLaunchers: { 
     Chrome_without_security: { 
     base: 'Chrome', 
     flags: ['--disable-web-security'] 
     } 
    }, 
    preprocessors: { 
     './test/**/*.js':['webpack'] 
    }, 
    reporters: getReporters(), 
    coverageReporter: { 
     reporters: [ 
     {type: 'lcov', dir: 'coverage/', subdir: '.'}, 
     {type: 'json', dir: 'coverage/', subdir: '.'}, 
     {type: 'text-summary'} 
     ] 
    }, 
    exclude:['node_modules'], 
    port:9876, 

    files: [ 
     'node_modules/react/dist/react-with-addons.js', 
     'test/test.js' 
    ], 
    webpack:webpackConfig, 
    plugins: [ 
     'karma-webpack', 
     'karma-mocha', 
     'karma-coverage', 
     'karma-chrome-launcher' 
    ] 
    }) 
}; 

function getWebpackLoaders(){ 
    if(coverage){ 
    let loaders = webpackConfig.module.loaders; 
    let jsLoader = loaders[1]; 
    jsLoader.exclude = /node_modules|\.test\.js$/ //exclude both node_modules and test 
    loaders.push({ 
     test:/\.test\.js$/, 
     loaders:['babel-loader'] 
    }); 
    loaders.push({ 
     test: /\.js$/, 
     loaders: ['isparta'], 
     exclude: /node_modules|\.test.js$/ // exclude node_modules and test files 
    }) 
    } 
} 

function getReporters() { 
    var reps = ['progress']; 
    if (coverage) { 
    reps.push('coverage'); 
    } 
    return reps; 
} 

EDIT 1. Hinzufügen webpack.config zu diesem

var webpack = require('webpack'); 
var argv = require('minimist')(process.argv.slice(2)); 

var DEBUG = !argv.release; 

var AUTOPREFIXER_LOADER = 'autoprefixer-loader?{browsers:[' + 
    '"Android >= 4", "Chrome >= 20", "Firefox >= 24", ' + 
    '"Explorer >= 9", "iOS >= 6", "Safari >= 6"]}'; 

var GLOBALS = { 
    'process.env.NODE_ENV': DEBUG ? '"development"' : '"production"', 
    '__DEV__': DEBUG 
}; 

var config = { 

    entry: './app.js', 

    output: { 
    filename: 'app.js', 
    path: './build/', 
    publicPath: './', 
    sourcePrefix: ' ' 
    }, 

    externals: { 
    react: 'React' 
    }, 

    cache: DEBUG, 
    debug: DEBUG, 
    devtool: DEBUG ? '#inline-source-map' : false, 

    stats: { 
    colors: true, 
    reasons: DEBUG 
    }, 

    plugins: [ 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.DefinePlugin(GLOBALS) 
    ].concat(DEBUG ? [] : [ 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.UglifyJsPlugin(), 
    new webpack.optimize.AggressiveMergingPlugin() 
    ]), 

    resolve: { 
    extensions: ['', '.webpack.js', '.js', '.jsx'] 
    }, 

    module: { 
    preLoaders: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'eslint-loader' 
     } 
    ], 

    loaders: [ 
     { 
     test: /\.less$/, 
     loader: 'style-loader!css-loader!' + AUTOPREFIXER_LOADER + '!less-loader' 
     }, 
     { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader' 
     }, 
     { 
     test: /\.json$/, 
     exclude: /node_modules/, 
     loader: 'json-loader' 
     } 
    ] 
    } 
}; 

module.exports = config; 
+1

Sie mischen ES5 und ES6, wird die Konfigurationsdatei ebenfalls transpiliert? –

+0

Was ist in Ihrer 'webpack.config'? – N3dst4

Antwort

5

Ihre Tests wahrscheinlich eine Diskrepanz gefunden haben, zu vergleichen Elemente Reaktion, aber Mokka kann nicht in String konvertieren einen internen Symboleigenschaft

Versuchen Sie die Datei node_modules/mocha/lib/utils.js um die Linie der Bearbeitung 602 in der Funktion canonicalize und ersetzen:

default: 
    canonicalizedObj = value + ''; 

von

default: 
    canonicalizedObj = String(value); 

Dann wieder Ihre Tests laufen. Dieses Mal sollte Mocha Ihnen zeigen können, was schief gelaufen ist.

+0

Ja das hat funktioniert. Ich denke, implizite Konvertierung von Symbolen ist nicht möglich. Das war der Grund. –

3

Ich lief gerade in dieses Problem auch genau den gleichen Stapel verwenden.

Wenn Sie den shallowRenderer von TestUtils und die folgenden docs-Beispiele von Redux verwenden, stoßen Sie höchstwahrscheinlich darauf, wenn Sie versuchen, die Ausgabe zu protokollieren. Sortieren Sie die Ausgabe (JSON.stringify, etc), um das Problem zu lösen.

@Ricado Stuven Antwort: Mocha hat diese Zeile auf value.toString() aktualisiert. Atleast für die neueste Version ab diesem Postdatum (v2.3.4).

Veröffentlichen Sie ein Beispiel Ihrer Testdatei, wo es fehlschlägt, wenn dies nicht der Fall ist. Prost.

5

Stellen Sie sicher, dass Sie nicht versuchen, console.log das Ergebnis getRenderOutput. Das war das Problem in meinem Fall.