8

React+Redux アプリには webpack+babel を、テストには Mocha+Karma を使用しています。redux テスト ケースは適切に実行されています。ただし、react-addons-test-utils を使用して DOM テストを実行し、Karma で実行しようとすると、このエラーが発生します

キャッチされていない TypeError: http://localhost:9876/karma.js:339で Symbol 値を文字列に変換できません

適切にデバッグするために、カルマ lib ファイルにいくつかのロガーを入れて (持ってはいけないとわかっています)、これを取得しました。

React DOM テストの Karma エラー

ただし、KarmaJS を使用せず、単純にテストを実行しようとすると、うまくいくようです。ここに私の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.これにwebpack.configを追加します

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;
4

3 に答える 3

5

console.logの結果を求めていないことを確認してくださいgetRenderOutput。これが私の場合の問題でした。

于 2016-06-06T12:46:37.603 に答える
3

まったく同じスタックを使用して、この問題にも遭遇しました。

TestUtilsのshallowRendererを使用し、Reduxのドキュメントの例に従っている場合、出力をログに記録しようとすると、おそらくこれに遭遇するでしょう. 問題を解決するには、出力を文字列化 (JSON.stringify など) します。

@Ricado Stuven の回答: Mocha はその行を value.toString() に更新しました。少なくとも、この投稿日時点の最新バージョン (v2.3.4) です。

そうでない場合は失敗するテストファイルのサンプルを投稿してください。乾杯。

于 2016-02-15T22:59:13.507 に答える