Jest: Object literals: Compared values have no visual difference.

[Kaelinator]

System:
    OS: Windows 10
    CPU: x64 Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz
Binaries:
    npm: 5.8.0 - C:\Users\Owner\AppData\Roaming\npm\npm.CMD

I am on [email protected].

The two objects are the same. I've done some research, and it seems that the Compared values have no visual difference. occurs when there is an anonymous function in question. This is not the case.

Here's the code:

const stripData = obj => obj.data
const assign = child => parent => Object.assign(parent, child)
const arrAssign = (arr, k) => data => data.map((d, i) => assign({[k]: d})(arr[i]))

/* function being tested */
const insertAndPair = (obj, key1, key2) => compose(
  d => assign({ [key1]: arrAssign(obj.slice(-1)[0][key1], key2)(d) })(obj.slice(-1)),
  stripData
)

Here's the test:

it('given an array and key then an object, assigns the first'
  + ' element in the array to the object with the given key', () => {

    const arr = [{
      vals: [
        { x: [], y: 'hello'},
        { x: [], y: 'hey'}
      ]
    }]

    expect(
      insertAndPair(arr, 'vals', 'x')({data: [1, 2]})
    ).toEqual([ { vals: [
      { x: 1, y: 'hello' },
      { x: 2, y: 'hey' }
    ] } ])
  })

Pardon my convoluted code, haha!

[Kaelinator]

Wrapping them both in JSON.stringify passes the test, but I find this to be a workaround rather than a fix.

[SimenB]

Mind setting up a small repo we can pull down? e.g. compose is missing from your snippet, but it's always easier to just clone something 🙂

[Kaelinator]

Will a gist work? @SimenB https://gist.github.com/Kaelinator/61356074158a4145d987490b3c071477
If you need a repo, just tell me!

[SimenB]

Yeah, that's fine!

Seems like insertAndPair creates a weird array-like object:

It's pretty different after a JSON.stringify and JSON.parse:

I don't know enough JavaScript to understand what's going on here :P

@thymikee ideas?

I'm not convinced this is a bug in Jest - the object serializes weirdly which is why Jest is saying there are no visual differences, while the value has some weird properties.

[thymikee]

Just quickly played with this, but I don't think these are equivalent. Looks like your fn is assigning a value to the array:

There's no visual difference, because Jest displays arrays as arrays, not objects. I'd mark it as a won't fix (or improve error message with some traits, e.g. "properties of the array/object differs in this way ...")

[SimenB]

Yeah, closing.

As a workaround you can do expect(JSON.parse(JSON.stringify(insertAndPair(stuff)))).toEqual([otherStuff]), which strips away the property and makes equals work.

If you have ideas about how we could improve the error message, we'd be happy to do so!

[Yorkshireman]

@SimenB how about "Compared values have no visual difference but may have different properties."

[dandv]

Here's a live sample generating this error when an array has an extra property.

describe('add', () => {
  const a1 = [{ foo: 'bar' }];
  a1.baz = 'quux';
  it('should say arrays match', () => {
    expect(a1).toMatchObject([{ foo: 'bar' }]);
  });
});

Whether a1 has property baz or not, I do expect it to match the [{ foo: 'bar' }] object.