Testing UI using unstated-next

[Guilherme Ramos]

Hi Guys, do you know how to avoid the following error?

I have this test:

import { renderHook } from '@testing-library/react-hooks';
import { act, render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

describe('Setting Button Component', () => {
  it('should change the state when clicked', async () => {
    const { result } = renderHook(() => SettingModalState.useContainer(), {
      wrapper: SettingModalStateWrapper
    });

    const { modal, toggleModal } = result.current;

    const { getByRole } = render(
      <SettingButtonPresenter modal={modal} toggleModal={toggleModal} />
    );

    const button = getByRole('button');

    act(() => {
      userEvent.click(button);
    });

    expect(result.current.modal).toBeTruthy();
  });
});

the testing is working, but i am having the following error:

  Setting Button Component
    ✓ should change the state when clicked (153 ms)

  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 Provider (/Users/guilhermeramos/Desktop/projects.nosync/meket-client/node_modules/unstated-next/src/unstated-next.tsx:19:29)
        at Object.<anonymous>.exports.SettingModalStateWrapper (/Users/guilhermeramos/Desktop/projects.nosync/meket-client/src/testUtils/providers.tsx:9:17)

       8 | 
       9 |   const toggleModal = React.useCallback(() => {
    > 10 |     setModal((prevState) => !prevState);
         |     ^
      11 |   }, [setModal]);
      12 | 
      13 |   const openModal = React.useCallback(() => {

      at printWarning (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:68:30)
      at error (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:44:5)
      at warnIfNotScopedWithMatchingAct (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15005:9)
      at dispatchAction (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7128:9)
      at src/features/SettingModal/SettingModal.state.tsx:10:5
      at onClick (src/features/SettingModal/components/SettingButton/SettingButton.presenter.tsx:13:20)
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:3945:14)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.236 s, estimated 5 s
Ran all test suites matching /\/Users\/guilhermeramos\/Desktop\/projects\.nosync\/meket-client\/src\/features\/SettingModal\/components\/SettingButton\/SettingButton\.test\.tsx/i with tests matching "should change the state when clicked".