Jest: Immutable.List is not visible in comparison

Created on 6 Sep 2016 · 4Comments · Source: facebook/jest

In one of my tests, I ran into this issue that Jest didn't show me differences in actual/expected. It failed for no apparent reason, even saying Compared values have no visual difference.

When I did a console.log on actual and expected, I saw that the Immutable.List wasn't visible within the Jest comparison.

See output:

Running test RouteController-test.js.
 FAIL  RouteController-test.js
  ● Console

    console.log RouteController-test.js:231
      { routes: List [ "MainRoute", "Page2Route", "Page2Tab2Route" ],
        message: 'Bootload XHR error TestError: 0 Test Failure.',
        event_source: 'Config1',
        event_category: 'ice_routing_error',
        event: 'load_failure' }
    console.log RouteController-test.js:232
      { routes: [ 'MainRoute', 'Page2Route', 'Page2Tab2Route' ],
        message: 'Bootload XHR error TestError: 0 Test Failure.',
        event_source: 'Config1',
        event_category: 'ice_routing_error',
        event: 'load_failure' }

  ● RouteController › Loading › fails on loading error

    expect(received).toEqual(expected)

    Expected value to equal:
      {"routes":["MainRoute","Page2Route","Page2Tab2Route"],"message":"Bootload XHR error TestError: 0 Test Failure.","event_source":"Config1","event_category":"ice_routing_error","event":"load_failure"}
    Received:
      {"routes":["MainRoute","Page2Route","Page2Tab2Route"],"message":"Bootload XHR error TestError: 0 Test Failure.","event_source":"Config1","event_category":"ice_routing_error","event":"load_failure"}

    Difference:

    Compared values have no visual difference

      at Object.<anonymous> (RouteController-test.js:243:29)

Test Summary
 › Ran tests on the www site.
 › 1 test failed, 6 tests passed (7 total in 1 test suite, run time x.xxs)

Help Wanted good first issue

Source

marcelerz

Most helpful comment

the problem is that pretty-format has exactly the same formatting for both immutable lists and arrays

> Immutable = require('immutable'); format = require('pretty-format');
[Function: prettyFormat]
> format(Immutable.List([1, 2, 3]));
'Array [\n  1,\n  2,\n  3\n]'
> format([1, 2, 3]);
'Array [\n  1,\n  2,\n  3\n]'
>

aaronabramov on 6 Sep 2016

👍3

All 4 comments

the problem is that pretty-format has exactly the same formatting for both immutable lists and arrays

> Immutable = require('immutable'); format = require('pretty-format');
[Function: prettyFormat]
> format(Immutable.List([1, 2, 3]));
'Array [\n  1,\n  2,\n  3\n]'
> format([1, 2, 3]);
'Array [\n  1,\n  2,\n  3\n]'
>

aaronabramov on 6 Sep 2016

👍3

As mentioned in https://github.com/thejameskyle/pretty-format/issues/32, pretty-format is just calling .toJS(). That means any Immutable Itereable will be formatted as an Array and any KeyedIterable will be formatted as an Object.

rickhanlonii on 8 Sep 2016

I think the right fix for this would be to do two diff passes: one that uses toJSON inside of pretty-format and if the two objects are identical, call pretyt-format again with toJSON ignored. This will require some small changes to pretty-format and jest-diff.