Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Issue with antd Table when scroll.x is true

See original GitHub issue

Current behavior:

The issue is this weird behaviour when scroll={ x: true } is used on a Antd Table component (https://ant.design/components/table/#API).

The problem is happening only with cypress >= 4.6.0 and when a parameter scroll x is specified. For example:

<Table
  loading={this.state.loading}
  bordered
  size="small"
  scroll={{ x: true }}
  columns={columns}
  dataSource={this.state.data}
  pagination={{
    pageSize: 5,
    hideOnSinglePage: true,
  }}
/>

This is the weirdest behaviour.

Desired behavior:

This error should not happen.

Test code to reproduce

Test project: https://github.com/bn3t/cypress-test-table. The test shows 2 use cases:

Failing test: http://localhost:3000/
Succeeding test when scroll.x true is not used: http://localhost:3000/no-scroll-x.

Versions

Cypress 4.6.0 >= 0, MacOS, Chrome, Firefox, Edge.

Issue Analytics

State:
Created 3 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

jennifer-shehanecommented, Jun 8, 2020

Yah, I can recreate this. It has something to do with the combination of scroll: x and the imported antd/dist/antd.css.

In 4.5.0, you can see the actual error as the ResizeObserver loop limit exceeded.

Smallest reproducible code is below. Run:

npm start
npm cypress:open

package.json

{
  "name": "my-application",
  "version": "1.2.3",
  "scripts": {
    "start": "react-scripts start",
    "cypress:open": "cypress open"
  },
  "devDependencies": {
    "cypress": "4.7.0",
    "typescript": "^3.9.5"
  },
  "dependencies": {
    "antd": "^4.3.3",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "^3.4.1"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

spec.js

it('test', () => {
  cy.visit("http://localhost:3000/")
})

src/index.js

import React from "react";
import ReactDOM from "react-dom";
import { Table } from "antd";
import "antd/dist/antd.css";

ReactDOM.render(
  <Table
    scroll={{ x: true }}
  />,
  document.getElementById("root")
)

public/index.html

<html>
<body>
  <div id="root"></div>
</body>
</html>

0reactions

bn3tcommented, Jul 10, 2020

Thanks for the info. It was really confusing because the application does not show any sign of a thrown exception. Only Cypress is getting this error. Furthermore, my real application has several tests with such a table containing the scroll feature. These tests behave correctly in 4.5.0.

Thank you for your help.