Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

@cypress/react18 does not properly rerender #23357

Closed
hiebj opened this issue Aug 16, 2022 · 2 comments · Fixed by #23360
Closed

@cypress/react18 does not properly rerender #23357

hiebj opened this issue Aug 16, 2022 · 2 comments · Fixed by #23360
Assignees

Comments

@hiebj
Copy link
Contributor

hiebj commented Aug 16, 2022

Current behavior

  • The rerender function returned by @cypress/react18 creates a new root on every render, forcibly recreating the component tree on rerender.
  • The rerender functionality does not work (a mounted component's state can't be persisted from one render to the next).

Desired behavior

  • The rerender function returned by @cypress/react18 should reuse the existing root if it has already been created but not yet cleaned up.
  • The rerender functionality should work (a mounted component's state should be persisted from one render to the next).

Test code to reproduce

The rerender/input-accumulator test from the adjacent react package fails. Also,

import React from 'react';

import { mount } from '@cypress/react18';

describe('rerender', () => {
  it('should persist state between rerender() calls', () => {
    mount(<StatefulComponent foo="baz" />).then(({ rerender }) => {
      cy.get('button').should('have.text', 'baz 0');
      cy.get('button').click().should('have.text', 'baz 1');
      rerender(<StatefulComponent foo="baz" />);
      cy.get('button').should('have.text', 'baz 1');
    });
  });
});

const StatefulComponent: React.FC<{ foo: string }> = ({ foo }) => {
  const [bar, setBar] = React.useState(0);
  return (
    <button
      onClick={() => {
        setBar(bar + 1);
      }}
    >
      {foo} {bar}
    </button>
  );
};

Cypress Version

10.4.0

Node version

v14.19.1

Operating System

macOS 12.4

Debug Logs

No response

Other

In the console, the following message is printed from React:

react-dom.development.js?61bb:86 Warning: You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. Instead, call root.render() on the existing root instead if you want to update it.

I believe I know exactly what the issue is and how to fix it, I am creating this issue to accompany a PR.

@baus
Copy link
Collaborator

baus commented Aug 30, 2022

@cypress-bot
Copy link
Contributor

cypress-bot bot commented Sep 13, 2022

Released in 10.8.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v10.8.0, please open a new issue.

@cypress-bot cypress-bot bot locked as resolved and limited conversation to collaborators Sep 13, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants