'Cannot convert a Symbol value to a string' when i test react.

[MrKou47]

Expected behaviour

No Error.

Actual behaviour

  test component
    ✖ test demo component
      Chrome 62.0.3202 (Mac OS X 10.12.6)
    TypeError: Cannot convert a Symbol value to a string
        at ContextKarma.stringify (context.js:75:34)
        at ContextKarma.log (context.js:138:24)
        at console.localConsole.(anonymous function) [as log] (context.js:242:16)
        at Context.<anonymous> (test.webpack.js:9:576885)

Environment Details

{
  "dependencies": {
    "autoprefixer": "^7.1.4",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "clean-webpack-plugin": "^0.1.16",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^2.30.1",
    "moment": "^2.19.1",
    "node-sass": "^4.5.3",
    "postcss-loader": "^2.0.6",
    "prop-types": "^15.6.0",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router": "^3.2.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.8.2",
    "webpack-module-hot-accept": "^1.0.5"
  },
  "devDependencies": {
    "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
    "babel-register": "^6.26.0",
    "chai": "^4.1.2",
    "expect": "^21.2.1",
    "karma": "^1.7.1",
    "karma-babel-preprocessor": "^7.0.0",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-coverage": "^1.1.1",
    "karma-mocha": "^1.3.0",
    "karma-mocha-reporter": "^2.2.5",
    "karma-webpack": "^2.0.5",
    "mocha": "^4.0.1",
    "react-addons-test-utils": "^15.6.2",
    "react-hot-loader": "^3.0.0"
  }
}

// karma.conf.js
module.exports = function(config) {
  config.set({

    basePath: '',

    frameworks: ['mocha', 'chai'],

    files: [
      // '__test__/**/*.spec.js'
      'test.webpack.js'      
    ],

    exclude: [
      '**/*.swp',
      'src/router.config.js'
    ],


    preprocessors: {
      'test.webpack.js': ['webpack', 'coverage'],
    },

    webpack: {
      devtool: 'inline-source-map',
      resolve: {
        extensions: ['.js', '.jsx'],
      },
      module: {
        rules: [{
          test: /\.jsx?$/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['react', 'es2015', 'stage-0'],
              plugins: ['transform-runtime']
            },
          },
          exclude: /(node_modules|bower_components)/,
        },]
      },
    },
    webpackMiddleware: {
      noInfo: true
    },

    reporters: ['mocha', 'coverage'],

    port: 9876,

    colors: true,

    logLevel: config.LOG_INFO,

    autoWatch: true,

    browsers: ['Chrome'],

    singleRun: false,

    concurrency: Infinity,

    coverageReporter: {
      reporters:[
        {type: 'html', dir: 'coverage/'},
        {type: 'text-summary'}
      ],
    }
  })
}

Steps to reproduce the behaviour

// __test__/demo.spec.js
import React from 'react';
import { expect } from 'chai';
import TestUtils from 'react-dom/test-utils';

class Common extends React.Component {
  render() {
    return (
      <div>hello world</div>
    )
  }
}

describe('test component', () => {
  it('test demo component', () => {
    const renderer = TestUtils.createRenderer();
    renderer.render(<Common />);
    const output = renderer.getRenderOutput();
    console.log(output); // NOTE! If i delete this code. Karma will be ok. But why can't i console this result and how to fix this?
  })
})

2. npm test

Chrome 62.0.3202 (Mac OS X 10.12.6) LOG: 'p1'
ERROR: 'Warning: Shallow renderer has been moved to react-test-renderer/shallow. Update references to remove this warning.'
  test component
    ✖ test demo component
  Test util
    ✔ should return params

Finished in 0.263 secs / 0.015 secs @ 17:15:37 GMT+0800 (CST)

SUMMARY:
✔ 1 test completed
✖ 1 test failed

FAILED TESTS:
  test component
    ✖ test demo component
      Chrome 62.0.3202 (Mac OS X 10.12.6)
    TypeError: Cannot convert a Symbol value to a string
        at ContextKarma.stringify (context.js:75:34)
        at ContextKarma.log (context.js:138:24)
        at console.localConsole.(anonymous function) [as log] (context.js:242:16)
        at Context.<anonymous> (test.webpack.js:9:576885)


=============================== Coverage summary ===============================
Statements   : 35.85% ( 3670/10236 )
Branches     : 10.64% ( 718/6749 )
Functions    : 34.76% ( 640/1841 )
Lines        : 36.2% ( 3649/10081 )

[OrenSchwartz]

any solution ?

[johnjbarton]

From the posted code:

console.log(output); // NOTE! If i delete this code. Karma will be ok. But why can't i console this result and how to fix this?

The code 'output' has the type of a ES6 Symbol and these do not convert to String. There is nothing karma can do to change this result. You could complain to es-discuss I suppose.

[Xesenix]

@johnjbarton Kind of weak excuse especial that console.log doesn't have any problems with login outside of karma.

Why can't you just add case for symbol to switch inside stringify?
https://github.com/karma-runner/karma/blob/master/common/stringify.js#L16

[johnjbarton]

console.log doesn't have any problems with login outside of karma.

This is a common issue everywhere console and symbol meet, eg
https://www.google.com/search?ei=IC7jWrSgL8uJ0wLKvJHIBA&q=console+log+Cannot+convert+a+Symbol+value+to+a+string&oq=console+log+Cannot+convert+a+Symbol+value+to+a+string&gs_l=psy-ab.3...23100.24020.0.24492.7.7.0.0.0.0.97.581.7.7.0....0...1.1.64.psy-ab..0.0.0....0.c08lMyRUE1A

Why can't you just add case for symbol to switch inside stringify?

Because karma stringify is not involved in the code discussed here. It is is just console and react.

But you are welcome to prepare a PR and prove me wrong.

[Xesenix]

maybe we have different case im using jasmine@3.1.0 for my tests but same error for me its:

Chrome 66.0.3359 (Windows 7.0.0) moves should move rock box player up if they are adjacent one over each other FAILED
        TypeError: Cannot convert a Symbol value to a string
            at <Jasmine>
            at ContextKarma.stringify (http://localhost:9876/context.js:1804:34) // clearly stringify its used
            at ContextKarma.log (http://localhost:9876/context.js:1867:24)
            at <Jasmine>
            at Algorithm.resolveCell (src/game-00/main.test.ts:214654:13)
            at ordered.filter.obj (src/game-00/main.test.ts:214613:42)
            at <Jasmine>
            at Algorithm.update (src/game-00/main.test.ts:214613:23)
            at UserContext.it (src/game-00/main.test.ts:214494:19)

also for me adding

switch (typeof obj) {
  case 'symbol':
    return obj.toString();

in stringify is enough but i don't see it in my console.log output even if i add some additional marking for it like instead obj.toString(); i return 'some symbol' i dont see that in console output.

But from i see above he also had:

TypeError: Cannot convert a Symbol value to a string
        at ContextKarma.stringify (context.js:75:34) // here stringify
        at ContextKarma.log (context.js:138:24)
        at console.localConsole.(anonymous function) [as log] (context.js:242:16)
        at Context.<anonymous> (test.webpack.js:9:576885)

[johnjbarton]

Yes, that does look like an issue in karma.

[Xesenix]

I have a problem with writing PR for this I can't find branch that passes running tests or build

[johnjbarton]

Yes, that is due to an update on chrome, I'm working on it.

[johnjbarton]

Ok master now passes for me.

[Xesenix]

I have created PR for it #2990 but still have some issues with tests.