Jest Test "Compared values have no visual difference."

Question

I'm doing a comparison between two objects that are quite complex and attempting to use the .toEqual method in expect.

Here is my test:

it('check if stepGroups data in controlData matches data in liveData', () =>    {
    var controlStore = data.controlStore
    var liveStore
    return getData().then(result => {
        liveStore = new Store()
        liveStore.loadData(JSON.parse(result))
        expect(controlStore).toEqual(liveStore)  
    })
})

I did a diff between the expected and the the received output and they both appear to be the same. What would still be causing this test to fail? I was reading up on pretty-format (https://github.com/facebook/jest/issues/1622). Have you run into similar situations?

Solution 1

use expect(JSON.stringify(controlStrore)).toEqual(JSON.stringify(liveStore))

Solution 2

In your code sample you are comparing two instances of Store, which encapsulate some data. Thus even if data (result json in your case) is the same, it doesn't necessarily imply that both container instances can be considered equal.

It should be possible to do something like expect(controlStore.getState()).toEqual(liveStore.getState()).

Solution 3

You probably trying to set a method via a lambda-function in your Store class. So jest is trying to compare to different functions, which were generated separately each time you do new Store(). As a result it rises an error, though it cant display difference, it just cant print functions.

Solution 4

I would not recommend using JSON.stringify as it might hide an underlying problem. In my experience, this error mostly occurs when an array is assigned a key that is not a number. Example:

  const arr = [1]
  arr.a = 'b'
  expect(arr).toEqual([1])

The test fails with the error Compared values have no visual difference. To understand what is going on I recommend to log the object and then adapt the test case as necessary.

console.log(arr)
// logs [ 1, a: 'b' ]

View more solutions