Chai's deepEqual does not show an object diff when run in mocha with Karma

When using mocha and chai in a Node.js environment, when an assertion using deepEquals fails, you get a detailed output showing piece by piece what is different between the expected and actual values.

Take for example, these tests, located in a file, tests/objects_are_equal.js:

if(!expect)
  var expect = require('chai').expect;

describe('nice output', function(){
  it('should fail this test with a nice output when objects are not equal', function(){
    var objectA = {
      a: 'some string',
      b: 9,
      c: 20,
      d: 100,
    },
    objectB = {
      a: 'some other string',
      b: 10,
      g: '100',
    };

    expect(objectA).to.eql(objectB);
  });
  it('should fail this test with a nice output when arrays are not equal', function(){
    var arrayA = ['a', 6, 10, 9, 20, '15', 20, 30, 45, 60],
      arrayB = ['c', 2, '8', '15', 8, 30, '8', 5, 10, 'a', 8, '60'];

    expect(arrayA).to.eql(arrayB);
  });
});

If you run the above tests with mocha in a node.js environment, with the command mocha, you get the following output:

But if you run them using karma-mocha, you get the following output:

This makes it really challenging to debug why object comparisons didn’t work, and I find myself having to do console.log on the objects in the test to see what is different between objects, which is not ideal.

According to an issue in chai:

…with diffing…it is in the test harness domain, so if you are not seeing useful diffs, I’d kindly ask you raise the issue with your test harness, for example Mocha.

I’m not sure if this bug belongs in karma-mocha or karma.

The bug still happens if the tests run in Chrome or Phantomjs, and if I load chai.js directly onto the page instead of via a karma-chai.

For the reference, here is my karma.conf file:

module.exports = function(config) {
  config.set({
    basePath: '',

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

    files: [
      'test/*.js'
    ],

    reporters: ['progress'],

    colors: true,

    logLevel: config.LOG_INFO,

    browsers: ['Chrome'],
  })
}

[ItsCosmo]

If you use karma-mocha-reporter, there is a “showDiff” configuration option:

mochaReporter: {
    showDiff: true
}

[NickHeiner]

@ItsCosmo wow, it’s so much better with that option set. Thanks! I wonder why that isn’t the default.