should('have.data') caches data values

[iota-pi]

Current behavior:

The value of data is cached, such that the same values are returned for all future should('have.data')

Desired behavior:

The value should be updated so as to be able to assert changes in data attributes

Steps to reproduce: (app code and test code)

https://github.com/iota-pi/cypress-bug-data-cache (using React)

// App.js
import React from 'react';

class App extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  render() {
    return (
      <button
        onClick={this.handleClick}
        data-count={this.state.count}
      >
        Hello world
      </button>
    );
  }

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  }
}

export default App;

/// <reference types="Cypress" />

context('data caching', () => {
  beforeEach(() => {
    cy.visit('http://localhost:3000/')
  })

  it('fails to get count from data', () => {
    cy.get('button')
      .should('have.data', 'count', 0)
      .click()
      .should('have.data', 'count', 1)
  })

  it('gets count from data once', () => {
    cy.get('button')
      .click()
      .click()
      .should('have.data', 'count', 2)
  })
})

Versions

Cypress: 3.6.1
Browser: Chrome 78 / Electron 73
OS: Windows 10

[basicdays]

Ran into this issue too. I would have expected the cy.get command to retry and retrieve a fresh instance of the element instead of using the same dataset from the original get. This definitely seems like a bug to me.

[jennifer-shehane]

As per the documentation, .click() yields the exact same subject that it was given, so it would not requery the button. https://on.cypress.io/click#Yields

You'll need to update the tests to requery the button:

/// <reference types="Cypress" />

context('data caching', () => {
  beforeEach(() => {
    cy.visit('http://localhost:3000/')
  })

  it('fails to get count from data', () => {
    cy.get('button')
      .should('have.data', 'count', 0)
      .click()
     cy.get('button').should('have.data', 'count', 1)
  })

  it('gets count from data once', () => {
    cy.get('button')
      .click()
      .click()
    cy.get('button').should('have.data', 'count', 2)
  })
})

[iota-pi]

Unfortunately, this doesn't solve the issue. In fact, your proposed solution with re-querying the button demonstrates the same issue as the initial reproduction steps.

Also, if the button shouldn't be requeried, why does something like the below work? I think that the given reproduction is valid (i.e. it should work)

it('updates text', () => {
  cy.get('button')
    .should('have.text', 'Hello world')
    .click()
    .should('have.text', 'abcdefg')
}

[basicdays]

This also doesn't handle the situation where you have something like:

cy.get('html').should('have.data', 'eventCalled', true);

Where eventually there should be a data prop added to that element.

[brunolemos]

How could we workaround this?

[brunolemos]

My current workaround:

Instead of: .should('have.data', 'key', 'value')
Do: .should(haveData('key', 'value'))

function haveData(name: string, value: string) {
  return ($el: Element) => {
    expect($el[0].getAttribute(`data-${name}`)).to.be.equal(value);
  };
}

This works without any cache issue.

[ro-savage]

Running into the same issue. We are using the data-test attribute to record data about the object used to create the element.

However, after we get the element, make and save our changes, then check the data-test again it hasn't updated as it's caching the data values.

Our workaround
We had to refresh the page, so we could check the data again.

[waverapha]

Same here:

describe('Theme Switcher', () => {
  beforeEach(() => {
    cy.visit('/')

    cy.get('[data-testid="body"]').as('body')
    cy.get('[data-testid="theme-switcher"]').as('theme-switcher');
  })

  it.only('should change theme on click', () => {
    cy.get('@body').should('have.data', 'theme', 'light')

    cy.get('@theme-switcher').click({force: true})
    
    cy.get('@body').should('have.data', 'theme', 'dark')
  })
})

I ended up asserting by another way:

cy.get('[data-theme="dark"]').should('exist')

[BlueWinds]

This will be resolved in Cypress 12, coming soon to an npm near you (by soon, I mean "early December"). See #7306 and more specifically #24628 for details.