Bug: When testing, code that causes React state updates should be wrapped into act(...):

[peter-coastpay-com]

When testing, this error is encountered pretty frequently despite tests passing the component function as we expect it to function.

When testing, code that causes React state updates should be wrapped into act(...):

Dealing with these warnings ends up being very time consuming and ultimately is not a good use of time.

Can you give us the option to disable them in some way, or just completely remove them from React entirely?

[peter-coastpay-com]

[maximsht]

+1. Verry irritating problem. This notification appears even after first render. Without any manipulation in code like this:

import React from 'react';
import { render, screen } from '@testing-library/react';

it('renders without error', () => {
    render(<LoginForm />);
    expect(screen.getByTestId('login_form')).toBeInTheDocument();
  });

Warning: An update to ForwardRef(Field) inside a test was not wrapped in act(...).
    
    When testing, code that causes React state updates should be wrapped into act(...):
    
    act(() => {
      /* fire events that update state */
    });
    /* assert on the output */
    
    This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
        at Field (/Users/maximshteygervald/GitHub/Flow/Flow_React/node_modules/react-final-form/dist/react-final-form.cjs.js:718:26)
        at isSubmitting (/Users/maximshteygervald/GitHub/Flow/Flow_React/src/components/form_elements/PasswordField/PasswordField.tsx:7:3)
        at form
        at id (/Users/maximshteygervald/GitHub/Flow/Flow_React/src/ui_components/Forms/FormValidation/FormValidation.tsx:11:7)
        at ReactFinalForm (/Users/maximshteygervald/GitHub/Flow/Flow_React/node_modules/react-final-form/dist/react-final-form.cjs.js:178:20)
        at buttonLabel (/Users/maximshteygervald/GitHub/Flow/Flow_React/src/pages/Auth/Login/components/LoginForm/LoginForm.tsx:33:3)
        at Provider (/Users/maximshteygervald/GitHub/Flow/Flow_React/node_modules/react-redux/lib/components/Provider.js:19:3)
        at basenameProp (/Users/maximshteygervald/GitHub/Flow/packages/react-router/lib/components.tsx:173:13)
        at basename (/Users/maximshteygervald/GitHub/Flow/packages/react-router/lib/components.tsx:33:3)
        at children (/Users/maximshteygervald/GitHub/Flow/Flow_React/src/jest/jest.decorators.tsx:14:3)
        at buttonLabel (/Users/maximshteygervald/GitHub/Flow/Flow_React/src/pages/Auth/Login/components/LoginForm/LoginForm.test.tsx:15:57)

      at printWarning (node_modules/react-dom/cjs/react-dom.development.js:86:30)
      at error (node_modules/react-dom/cjs/react-dom.development.js:60:7)
      at warnIfUpdatesNotWrappedWithActDEV (node_modules/react-dom/cjs/react-dom.development.js:27589:9)
      at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:25508:5)
      at dispatchSetState (node_modules/react-dom/cjs/react-dom.development.js:17527:7)
      at node_modules/react-final-form/dist/react-final-form.cjs.js:605:9
      at node_modules/final-form/dist/final-form.cjs.js:371:23

"react": "^18.2.0",
"react-router-dom": "^6.3.0",
"@testing-library/react": "^13.3.0",