How to fix wrong act() around your test interactions

Question

I created an app with create react app.

npx create-react-app someapp --template typescript

Then I installed konva and react-konva

yarn add konva react-konva

The App.tsx has been reduced to a minimum.

import { Stage, Layer, Rect, Circle } from 'react-konva';

const App = () => {
  return (
    <div>
      <h1>Drawing area</h1>
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          <Rect width={50} height={50} fill="red" />
          <Circle x={200} y={200} stroke="black" radius={50} />
        </Layer>
      </Stage>
    </div>
  );
}

export default App;

And the test only checks for the heading.

import { render, waitFor, screen } from "@testing-library/react";
import App from "./App";

test('render and check heading', async () => {
  render(<App />);
  await waitFor(() => screen.getByRole('heading'))

  expect(screen.getByRole('heading')).toHaveTextContent('Drawing area')
});

The test ends successfully but I always get a console error output.

console.error
    Warning: It looks like you're using the wrong act() around your test interactions.
    Be sure to use the matching version of act() corresponding to your renderer:
    
    // for react-dom:
    import {act} from 'react-dom/test-utils';
    // ...
    act(() => ...);
    
    // for react-test-renderer:
    import TestRenderer from react-test-renderer';
    const {act} = TestRenderer;
    // ...
    act(() => ...);

      at printWarning (node_modules/react-reconciler/cjs/react-reconciler.development.js:68:30)
      at error (node_modules/react-reconciler/cjs/react-reconciler.development.js:44:5)
      at warnIfNotScopedWithMatchingAct (node_modules/react-reconciler/cjs/react-reconciler.development.js:16602:9)
      at Object.updateContainer (node_modules/react-reconciler/cjs/react-reconciler.development.js:18188:7)
      at node_modules/react-konva/lib/ReactKonvaCore.js:84:19
      at commitHookEffectListMount (node_modules/react-dom/cjs/react-dom.development.js:20573:26)
      at commitLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:20634:11)

Can someone tell me why this message appears and / or what I can do about it?

I don't think the issue is from your code . Looks like it is from the library which you are using . If you see the error stack trace it shows clearly . `at node_modules/react-konva/lib/ReactKonvaCore.js:84:19` . The issue is something similar to this - https://stackoverflow.com/questions/63472496/testing-library-react-hooks-warning-it-looks-like-youre-using-the-wrong-act — Shyam, May 21 '21 at 16:29

How to fix wrong act() around your test interactions

0 Answers0