javascript - unit - tdd for front end

Karma+Mocha+React No se puede convertir un valor de Símbolo en una cadena

Question

Estoy usando webpack + babel para una aplicación React + Redux y Mocha + Karma para las pruebas. Los casos de prueba redux se están ejecutando correctamente. Sin embargo, cuando trato de hacer pruebas DOM usando react-addons-test-utils y ejecutarlo con Karma da este error

Unkeught TypeError: no se puede convertir un valor de Symbol a una cadena en http: // localhost: 9876 / karma.js: 339

Para depurarlo correctamente, puse un par de registradores en los archivos karma lib (sé que no debería) y obtuve esto

Error de Karma para las pruebas DOM de React

Sin embargo, cuando no uso KarmaJS y simplemente intento ejecutar las pruebas, parece estar bien. Aquí está mi 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;
}

EDITAR 1. Agregar webpack.config a esto

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

Sus pruebas probablemente hayan encontrado una falta de coincidencia al comparar los elementos de React, pero Mocha no puede convertir a string una propiedad interna de Symbol.

Intente editar el archivo node_modules/mocha/lib/utils.js alrededor de la línea 602 en la función canonicalize y reemplace:

default:
  canonicalizedObj = value + '''';

por

default:
  canonicalizedObj = String(value);

Luego, ejecuta tus pruebas nuevamente. Esta vez, Mocha debería poder mostrarle lo que salió mal.

Answer 2

Acabo de toparme con este problema usando exactamente la misma pila.

Si utiliza el shallowRenderer de TestUtils y sigue los ejemplos de documentación de Redux, lo más probable es que se encuentre con esto cuando intente registrar la salida. Stringify la salida, (JSON.stringify, etc.) para resolver el problema.

Respuesta de @Ricado Stuven: Mocha ha actualizado esa línea a value.toString (). Al menos para la última versión a partir de esta fecha de publicación (v2.3.4).

Publique una muestra de su archivo de prueba donde falle si no es así. Aclamaciones.

Answer 3

Asegúrese de no estar intentando console.log el resultado de getRenderOutput . Este fue el problema en mi caso.