Question

0

157

Views

Deep equal comparing not working on Cypress 9.7.0

I've updated my cypress to 9.7.0 version and right now I have a problem with deep equal. When I wrote test line of code:

expect([1,2,3]).to.deep.equal([1,2,3]);

Everything works correctly.

While I'm testing redux store I got an error which is looks

Timed out retrying after 4000ms: expected [ Array(2) ] to deeply equal [ Array(2) ]

Arrays in devtool console preview are the same... I've tried in two ways to write test. I also combined it with async and timeouts

First try:

it('Example redux check', () => {
        cy.fixture('file.json').then((fixtures) => {
            cy.window()
                .its('store')
                .invoke('getState')
                .its('queue.queueItems').should('deep.equal', fixtures.store.queue.queueItems);
        });
    });

Second try

it('Example redux check', () => {
    cy.fixture('file.json').then((fixtures) => {
        const getQueueItems = (win) => {
            return win.store.getState().queue.queueItems;
        }

         cy.window()
             .pipe(getQueueItems)
             .should('deep.equal', fixtures.store.queue.queueItems);
    });
});

Had anyone similar issue or idea how to avoid that timeout? Exactly the same is happening while comparing async payloads...

7 months ago · Juan Pablo Isaza

3 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-06-28T07:37:05.883Z

I couldn't fault the deep.equal assertion in Cypress v9.7.0, even deeply nested arrays and objects - except when the order differed.

If your problem is difference in array order, try adding package deepEqualInAnyOrder

const deepEqualInAnyOrder = require('deep-equal-in-any-order');
chai.use(deepEqualInAnyOrder);

it('matches when ordering is different', () => {
  
  const expected = [{a:{x:1}}, {b:2},{c:3}];

  expect([{a:{x:1}}, {b:2}, {c:3}]).to.deep.equal(expected)            // passes
  expect([{b:2}, {a:{x:1}}, {c:3}]).to.deep.equal(expected)            // fails

  expect([{b:2}, {a:{x:1}}, {c:3}]).to.deep.equalInAnyOrder(expected)  // passes

});

Answer 2 · 2022-06-28T07:37:05.891Z

I also wanted to see if deep.equal on the <h1> element of http://example.com would succeed.

Here is my minimal, reproducible example.

// Cypress 9.7.0

it('passes deep-equal of two DOM objects', () => {
  cy.visit('http://example.com')

  cy.get('h1').then($el1 => {                  // get h1 1st time
    cy.get('h1').then($el2 => {                // get another copy

      // Are they different objects?
      expect($el1).to.not.equal($el2)           // pass
      expect($el1 === $el2).to.equal(false)     // pass 

      // Do they deep-equal
      expect($el1).to.deep.equal($el2)          // pass
      
    })
  })
})

Answer 3 · 2022-06-28T07:37:05.899Z

Nearly all frontends I use have Cypress including some open source ones.

It is related to a few issues opened on GitHub and affects latest versions of Cypress.

https://github.com/cypress-io/cypress/issues/21353

https://github.com/cypress-io/cypress/issues/21469

This is what I get on a WIP after upgrading some tests that use deep.equal:

Your first example looks more standard.

I recommend downgrading to a lower version. The following version worked for me before upgrade:

9.5.4