Fix warning appearing in tests

[jackcmeyer]

🐛 Bug Report

This warning is appearing when running tests:

    console.error ../../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:120
      Warning: Cannot update a component (`ButtonBarProvider`) while rendering a different component (`TestHook`). To locate the bad setState() call inside `TestHook`, follow the stack trace as described in https://fb.me/setstate-in-render
          in TestHook
          in Suspense
          in ButtonBarProvider (at ButtonBarProvider.test.tsx:14)
          in wrapper

To Reproduce

run yarn test

Expected behavior

I would expect that warning not to appear.

Your Environment

[hemantpandey17]

I can take a look on this.

[jackcmeyer]

sounds great, @hemantpandey17!

[jackcmeyer]

After looking at some more logs, the same warning message can be seen when running the application.

[hemantpandey17]

After looking at some more logs, the same warning message can be seen when running the application.

Yes Jack, I saw the logs while running the application. All of them are pointing to a single function (setButtonToolbar()). Will look more into it, might need some guidance here.

[hemantpandey17]

Hello @jackcmeyer ,

Based on my codewalk,

` const setButtonToolBar = useButtonToolbarSetter()

const buttons = []
if (permissions.includes(Permissions.WritePatients)) {
buttons.push(
<Button
key="editPatientButton"
color="success"
icon="edit"
outlined
onClick={() => {
history.push(/patients/edit/${patient.id})
}}
>
{t('actions.edit')}
,
)
}

setButtonToolBar(buttons)`

The above piece of code piece the warning. The warning appears on calling setButtonToolBar(buttons). For me , it appears this is adding button based on permission to the button toolbar.

Not sure, why it is giving a warning. If you can throw more light on this, it would be really grateful.

Here is the warning info. :WordPress/gutenberg#21049