Karma + Mocha + React Impossibile convertire un valore Symbol in una stringa

Question

Sto usando webpack + babel per un'app React + Redux e Mocha + Karma per il test. I casi di test ridondanti vengono eseguiti correttamente. Tuttavia, quando cerco di fare dei test DOM utilizzando reagire-addons-test-utils ed eseguirlo con il Karma dà questo errore

TypeError Uncaught: Impossibile convertire un valore Simbolo per una stringa a http://localhost:9876/karma.js:339

Al fine per eseguire il debug correttamente ho messo un paio di taglialegna nel file lib karma (so che non dovrei avere) e ottenuto questo

Karma Error for React DOM testing

Tuttavia, quando io non uso KarmaJS e semplicemente provare a eseguire il test , sembra a posto. Ecco il mio 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. Aggiunta webpack.config a questo

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; 

Answer 1

i test probabilmente hanno trovato una mancata corrispondenza a confronto Reagire elementi, ma Mocha non può convertire in stringa un interno Proprietà del simbolo.

provare a modificare il file di node_modules/mocha/lib/utils.js attorno alla riga 602 nella funzione canonicalize e sostituire:

default: 
    canonicalizedObj = value + ''; 

da

default: 
    canonicalizedObj = String(value); 

Quindi, eseguire di nuovo i test. Questa volta, Mocha dovrebbe essere in grado di mostrarti cosa è andato storto.

Answer 2

Mi sono appena imbattuto in questo problema utilizzando lo stesso identico stack.

Se si utilizza shallowRenderer di TestUtils e si seguono gli esempi di documenti di Redux, è probabile che ciò si verifichi quando si tenta di registrare l'output. Stringificare l'output, (JSON.stringify, ecc.) Per risolvere il problema.

@Ricado Risposta di Stuven: Mocha ha aggiornato quella riga su value.toString(). Atleast per la versione più recente alla data di questo post (v2.3.4).

Pubblica un esempio del tuo file di test dove fallisce se non lo è. Saluti.

Answer 3

Assicurati di non provare a console.log il risultato di getRenderOutput. Questo era il problema nel mio caso.