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

[oveddan]

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'],
  })
}

[dignifiedquire]

I don't think this issue is directly with karma-mocha, but rather with mocha

[oveddan]

@dignifiedquire I don't believe thats the case, as when you run the tests directly in mocha in a node.js environment, without karma, via the cli with:

mocha

You get the desired detailed diff output

[maksimr]

@oveddan how look mocha result if you run mocha in browser?

In reality karma-mocha is adapter between mocha and karma and reporter. I think it would be nice allow user rewrite/extend the part that is responsible for the report.

Thanks

[oveddan]

@maksimr Same issue:

[oveddan]

@dignifiedquire You are right - it has to do with the actual mocha test runners.

I ran these tests with Karma in the chrome environment as @maksimr suggested using the chrome debugger, and discovered:

Looking at the chai.js code, it throws an AssertionError withexpectedandactual`

Mocha's html runner does not look at the actual/expected values coming from chai's AssertionError.

This issue belongs in Mocha :)

[ItsCosmo]

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

mochaReporter: {
    showDiff: true
}

[rkrdo]

@ItsCosmo that worked for me, I also had to install the diff module

[NickHeiner]

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

[trusktr]

Although using karma-mocha-reporter fixed the Node.js console output, the error in the debug browser window console is still bad:

Anyone know a trick for that?