Show test names

Background

---

So I thought a little background would be useful. I've been upgrading from react 0.14.2 to 16.1.1. Everything has been going quite smoothly up to this point, but I've suddenly run into the problem that when a test fails it will not show which test failed. This used to work before I started the upgrade to react 16.1.1.

What have I tried?

---

I've tried a couple of things to get this working again. First of all of course searches on Google and Stack Overflow, but I can't seem to find any results about this. Like I'm the only one having the issue.

I thought maybe the progress reporter I had specified in my karma.conf.js changed somewhere between React versions, so I thought I'd try to use a few different ones. I tried karma-spec-reporter and karma-nyan-reporter but they both showed similar outputs.

progress and karma-nyan-reporter do show me where the test is going wrong, but not which test is going wrong. Example output from both: progress:

bono@bono-Vostro-460:~/dev/git_repos/superfly$ karma start --browsers PhantomJS
28 11 2017 11:04:58.026:INFO [framework.browserify]: registering rebuild (autoWatch=true)
28 11 2017 11:05:08.997:INFO [framework.browserify]: 7163387 bytes written (10.21 seconds)
28 11 2017 11:05:09.057:INFO [framework.browserify]: bundle built
28 11 2017 11:05:09.075:WARN [karma]: No captured browser, open http://localhost:9876/
28 11 2017 11:05:09.081:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
28 11 2017 11:05:09.092:INFO [launcher]: Starting browser PhantomJS
28 11 2017 11:05:09.329:INFO [PhantomJS 1.9.8 (Linux 0.0.0)]: Connected on socket FFVxi0L468wFvrKNAAAA with id 71406772

PhantomJS 1.9.8 (Linux 0.0.0) ERROR: 'Warning: React depends on requestAnimationFrame. Make sure that you load a polyfill in older browsers.

PhantomJS 1.9.8 (Linux 0.0.0): Executed 12 of 114 SUCCESS (0 secs / 0.011 secs)
ERROR: 'Warning: Each child in an array or iterator should have a unique "key" prop. See url for more information.----,
    in div (created by Checklist)\ 
    in section (created by Checklist)
    in div (created by Checklist)
    in Checklist'
PhantomJS 1.9.8 (Linux 0.0.0): Executed 46 of 114 SUCCESS (0 secs / 0.23 secs)
PhantomJS 1.9.8 (Linux 0.0.0): Executed 63 of 114 SUCCESS (0 secs / 0.415 secs)
PhantomJS 1.9.8 (Linux 0.0.0) ERROR
  TypeError: 'undefined' is not an object (evaluating 'map.forEach')
  at /tmp/41fcee3a13c4f48409a143865f24ec82.browserify:958 <- /home/bono/dev/git_repos/superfly/superfly/webapp/js/checks.js:103:8
PhantomJS 1.9.8 (Linux 0.0.0): Executed 67 of 114 ERROR (0.745 secs / 0.559 secs)

nyan:

##########_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-__,------,
#########-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-__|  /\_/\ 
########_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_~|_( ^ .^) 
#######-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_ ""  "" 
######
#####
####
###
##
#

PhantomJS 1.9.8 (Linux 0.0.0)
TypeError: 'undefined' is not an object (evaluating 'map.forEach')
at http://localhost:9876/absolute/tmp/41fcee3a13c4f48409a143865f24ec82.browserify?b49d273453b34e281facad2d1a9aa72247785268:958

#
##
###
####
#####
######
#######
########
#########
##########

Checking the output of nyan basically pointed me to the same file as progress did. Which just points me to the place where it's going wrong, but not the specific test.

Config

---

I've got the following set up in my karma.conf.js:

// Karma configuration
// Generated on Fri Aug 28 2015 10:29:02 GMT+0200 (CEST)

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: http://ift.tt/1ft83uu
    frameworks: ['browserify', 'jasmine'],


    // list of files / patterns to load in the browser
    files: [
      './node_modules/babel-polyfill/browser.js',
      './node_modules/phantomjs-polyfill/bind-polyfill.js',
      './superfly/webapp/js/**/__tests__/**/*.js'
    ],


    // list of files to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: http://ift.tt/1gyw6MG
    preprocessors: {
      './superfly/webapp/js/**/__tests__/**/*.js': ['browserify']
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: http://ift.tt/1ft83KQ
    reporters: ['progress', 'nyan'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: http://ift.tt/1ft83KU
    browsers: ['Chrome', 'Firefox', 'PhantomJS'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    browserify: {
      debug: true,
      // Runtime is needed for PhantomJS
      transform: [ ['babelify', {optional: ['runtime'], plugins: ['babel-plugin-rewire']}] ]
    }
  })
};

My package.json:

{
  "name": "superfly",
  "version": "0.0.0",
  "description": "Superfly application",
  "repository": "xxx",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "xxx",
  "dependencies": {
    "babel": "~5.8.23",
    "babel-core": "~5.8.24",
    "babel-eslint": "~4.1.8",
    "babel-plugin-rewire": "~0.1.22",
    "babel-runtime": "~5.8.20",
    "babelify": "^6.1.2",
    "browserify": "^10.2.3",
    "d3": "3.5.6",
    "del": "^2.2.0",
    "gulp": "^3.8.11",
    "gulp-rename": "^1.2.2",
    "gulp-streamify": "0.0.5",
    "gulp-uglify": "^1.2.0",
    "gulp-util": "~3.0.6",
    "history": "^2.0.0",
    "immutable": "^3.7.5",
    "marked": "~0.3.5",
    "nvd3": "^1.8.1",
    "object-assign": "~3.0.0",
    "qs": "~3.1.0",
    "query-string": "^3.0.0",
    "react": "~16.1.1",
    "immutability-helper": "~1.0.0",
    "react-dom": "~16.1.1",
    "rx": "^2.5.3",
    "rx-dom": "^7.0.3",
    "through2": "~2.0.0",
    "vinyl-source-stream": "^1.1.0",
    "watchify": "^3.2.1",
    "prop-types": "~15.6.0"
  },
  "devDependencies": {
    "eslint": "~1.10.3",
    "eslint-plugin-react": "~2.6.4",
    "karma": "~0.13.9",
    "karma-browserify": "~4.3.0",
    "karma-chrome-launcher": "~0.2.0",
    "karma-firefox-launcher": "~0.1.6",
    "karma-jasmine": "~0.3.6",
    "karma-phantomjs-launcher": "~0.2.1",
    "jasmine-ajax": "~3.1.1",
    "jasmine-core": "~2.3.4",
    "phantomjs": "~1.9.18",
    "phantomjs-polyfill": "0.0.1",
    "babel-polyfill": "~6.26.0",
    "karma-nyan-reporter": "~0.2.5"
  }
}

Question

---

How can I make sure my tests show the test names again when the tests fail?

If you need any more information please let me know.

P.s. I don't think this gets triggered because of the warnings in the output, but if it is let me know.