Skip to content

Fix "... was not wrapped in act" warnings in tests #6048

@canova

Description

@canova

Now that don't have a lot of findDOMNode warnings while running tests, it's a lot easier to spot the rest of the warnings 😄

I see this while running the tests locally. It would be good to fix it:

  ● Console

    console.error
      Warning: An update to Connect(WithSizeWrapper) 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 ConnectFunction (/Volumes/Projects/profiler-2/node_modules/react-redux/src/components/connect.tsx:526:15)
          at div
          at TrackCounterImpl (/Volumes/Projects/profiler-2/src/components/timeline/TrackCounter.tsx:48:66)
          at ConnectFunction (/Volumes/Projects/profiler-2/node_modules/react-redux/src/components/connect.tsx:526:15)
          at Provider (/Volumes/Projects/profiler-2/node_modules/react-redux/src/components/Provider.tsx:60:11)
          at LocalizationProvider (/Volumes/Projects/profiler-2/node_modules/@fluent/react/index.js:260:75)

      1771 |       !objectShallowEquals(currentPreviewSelection, previewSelection)
      1772 |     ) {
    > 1773 |       dispatch({
           |       ^
      1774 |         type: 'UPDATE_PREVIEW_SELECTION',
      1775 |         previewSelection,
      1776 |       });

      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:27628:9)
      at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:25547:5)
      at forceStoreRerender (node_modules/react-dom/cjs/react-dom.development.js:16158:5)
      at handleStoreChange (node_modules/react-dom/cjs/react-dom.development.js:16134:7)
      at Object.checkForUpdates [as onStateChange] (node_modules/react-redux/src/components/connect.tsx:158:7)
      at Object.handleChangeWrapper [as callback] (node_modules/react-redux/src/utils/Subscription.ts:129:20)
      at node_modules/react-redux/src/utils/Subscription.ts:29:20
      at defaultNoopBatch (node_modules/react-redux/src/utils/batch.ts:3:3)
      at Object.notify (node_modules/react-redux/src/utils/Subscription.ts:26:7)
      at Object.notifyNestedSubs (node_modules/react-redux/src/utils/Subscription.ts:124:15)
      at Object.checkForUpdates [as onStateChange] (node_modules/react-redux/src/components/connect.tsx:145:9)
      at Object.handleChangeWrapper [as callback] (node_modules/react-redux/src/utils/Subscription.ts:129:20)
      at node_modules/react-redux/src/utils/Subscription.ts:29:20
      at defaultNoopBatch (node_modules/react-redux/src/utils/batch.ts:3:3)
      at Object.notify (node_modules/react-redux/src/utils/Subscription.ts:26:7)
      at Object.notifyNestedSubs (node_modules/react-redux/src/utils/Subscription.ts:124:15)
      at handleChangeWrapper (node_modules/react-redux/src/utils/Subscription.ts:129:20)
      at node_modules/redux/src/createStore.ts:220:7
          at Map.forEach (<anonymous>)
      at dispatch (node_modules/redux/src/createStore.ts:219:15)
      at node_modules/redux-thunk/dist/cjs/redux-thunk.cjs:32:12
      at dispatch (node_modules/redux/src/applyMiddleware.ts:52:38)
      at dispatch (src/actions/profile-view.ts:1773:7)
      at node_modules/redux-thunk/dist/cjs/redux-thunk.cjs:30:14
      at Object.dispatch (src/test/components/TrackPower.test.tsx:197:5)

    console.error
      Warning: An update to Connect(WithSizeWrapper) 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 ConnectFunction (/Volumes/Projects/profiler-2/node_modules/react-redux/src/components/connect.tsx:526:15)
          at div
          at TrackCounterImpl (/Volumes/Projects/profiler-2/src/components/timeline/TrackCounter.tsx:48:66)
          at ConnectFunction (/Volumes/Projects/profiler-2/node_modules/react-redux/src/components/connect.tsx:526:15)
          at Provider (/Volumes/Projects/profiler-2/node_modules/react-redux/src/components/Provider.tsx:60:11)
          at LocalizationProvider (/Volumes/Projects/profiler-2/node_modules/@fluent/react/index.js:260:75)

      1771 |       !objectShallowEquals(currentPreviewSelection, previewSelection)
      1772 |     ) {
    > 1773 |       dispatch({
           |       ^
      1774 |         type: 'UPDATE_PREVIEW_SELECTION',
      1775 |         previewSelection,
      1776 |       });

      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:27628:9)
      at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:25547:5)
      at forceStoreRerender (node_modules/react-dom/cjs/react-dom.development.js:16158:5)
      at handleStoreChange (node_modules/react-dom/cjs/react-dom.development.js:16134:7)
      at Object.checkForUpdates [as onStateChange] (node_modules/react-redux/src/components/connect.tsx:158:7)
      at Object.handleChangeWrapper [as callback] (node_modules/react-redux/src/utils/Subscription.ts:129:20)
      at node_modules/react-redux/src/utils/Subscription.ts:29:20
      at defaultNoopBatch (node_modules/react-redux/src/utils/batch.ts:3:3)
      at Object.notify (node_modules/react-redux/src/utils/Subscription.ts:26:7)
      at Object.notifyNestedSubs (node_modules/react-redux/src/utils/Subscription.ts:124:15)
      at Object.checkForUpdates [as onStateChange] (node_modules/react-redux/src/components/connect.tsx:145:9)
      at Object.handleChangeWrapper [as callback] (node_modules/react-redux/src/utils/Subscription.ts:129:20)
      at node_modules/react-redux/src/utils/Subscription.ts:29:20
      at defaultNoopBatch (node_modules/react-redux/src/utils/batch.ts:3:3)
      at Object.notify (node_modules/react-redux/src/utils/Subscription.ts:26:7)
      at Object.notifyNestedSubs (node_modules/react-redux/src/utils/Subscription.ts:124:15)
      at handleChangeWrapper (node_modules/react-redux/src/utils/Subscription.ts:129:20)
      at node_modules/redux/src/createStore.ts:220:7
          at Map.forEach (<anonymous>)
      at dispatch (node_modules/redux/src/createStore.ts:219:15)
      at node_modules/redux-thunk/dist/cjs/redux-thunk.cjs:32:12
      at dispatch (node_modules/redux/src/applyMiddleware.ts:52:38)
      at dispatch (src/actions/profile-view.ts:1773:7)
      at node_modules/redux-thunk/dist/cjs/redux-thunk.cjs:30:14
      at Object.dispatch (src/test/components/TrackPower.test.tsx:226:5)

┆Issue is synchronized with this Jira Task

Metadata

Metadata

Assignees

No one assigned

    Labels

    code maintenanceIssues that are not user facing, but are related the technical debt with the code itselftestsAnything related to tests

    Type

    No fields configured for Task.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions