should('have.data') caches data values

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

[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 https://github.com/cypress-io/cypress/pull/24628 for details.

[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.