@pingux/astro 2.85.0 → 2.86.0-alpha.1

package/lib/components/DataTable/DataTable.test.js

@@ -33,8 +33,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React from 'react';
 import { useAsyncList } from 'react-stately';
 import { useCollator } from '@react-aria/i18n';
-import { act, fireEvent, render, screen, within } from '@testing-library/react';
-import { act as actHooks, renderHook } from '@testing-library/react-hooks';
+import { act, act as actDom, act as actHooks, fireEvent, render, renderHook, screen, within } from '@testing-library/react';
 import { DataTableBody, DataTableCell, DataTableColumn, DataTableHeader, DataTableRow } from '../../index';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import DataTable from './DataTable';
@@ -95,7 +94,7 @@ var getCell = function getCell(view, text) {
   return el;
 };
 var focusCell = function focusCell(tree, text) {
-  return act(function () {
+  return actDom(function () {
     return getCell(tree, text).focus();
   });
 };
@@ -195,27 +194,35 @@ describe('Static DataTable', function () {
   });
   test('should move focus to the next cell in a row with ArrowRight', function () {
     var view = staticDataTable();
-    focusCell(view, 'USA');
+    act(function () {
+      focusCell(view, 'USA');
+    });
     moveFocus('ArrowRight');
     // eslint-disable-next-line jest-dom/prefer-focus
     expect(document.activeElement).toBe(getCell(view, 320000000));
   });
   test('should move focus to the previous cell in a row with ArrowLeft', function () {
     var view = staticDataTable();
-    focusCell(view, 'Asia');
+    act(function () {
+      focusCell(view, 'Asia');
+    });
     moveFocus('ArrowLeft');
     expect(getCell(view, 1398000000)).toHaveFocus();
   });
   test('should move focus to the next cell in a row with ArrowUp', function () {
     var view = staticDataTable();
-    focusCell(view, 'China');
+    act(function () {
+      focusCell(view, 'China');
+    });
     moveFocus('ArrowUp');
     // eslint-disable-next-line jest-dom/prefer-focus
     expect(document.activeElement).toBe(getCell(view, 'USA'));
   });
   test('should move focus to the previous cell in a row with ArrowDown', function () {
     var view = staticDataTable();
-    focusCell(view, 'Asia');
+    act(function () {
+      focusCell(view, 'Asia');
+    });
     moveFocus('ArrowDown');
     expect(getCell(view, 'Europe')).toHaveFocus();
   });
@@ -295,21 +302,19 @@ describe('Async DataTable', function () {
     expect(asyncTable).toHaveAttribute('aria-label', 'Custom table with onLoadMore');
     var body = screen.getAllByRole('rowgroup')[1];
     var scrollView = body === null || body === void 0 || (_body$parentNode = body.parentNode) === null || _body$parentNode === void 0 ? void 0 : _body$parentNode.parentNode;
-    if (scrollView) {
-      scrollView.scrollTop = 250;
-      fireEvent.scroll(scrollView);
-    }
-    act(function () {
+    scrollView.scrollTop = 250;
+    fireEvent.scroll(scrollView);
+    actDom(function () {
       jest.runAllTimers();
     });
     scrollView.scrollTop = 1500;
     fireEvent.scroll(scrollView);
-    act(function () {
+    actDom(function () {
       jest.runAllTimers();
     });
     scrollView.scrollTop = 2800;
     fireEvent.scroll(scrollView);
-    act(function () {
+    actDom(function () {
       jest.runAllTimers();
     });
     expect(onLoadMore).toHaveBeenCalledTimes(3);

package/lib/components/FieldHelperText/FieldHelperText.js

@@ -14,6 +14,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { forwardRef } from 'react';
 import { useStatusClasses } from '../../hooks';
+import statuses from '../../utils/devUtils/constants/statuses';
 import { statusDefaultProp } from '../../utils/docUtils/statusProp';
 import Text from '../Text';
 
@@ -26,7 +27,8 @@ import Text from '../Text';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var FieldHelperText = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,
-    status = props.status,
+    _props$status = props.status,
+    status = _props$status === void 0 ? statuses.DEFAULT : _props$status,
     id = props.id,
     others = _objectWithoutProperties(props, _excluded);
   var _useStatusClasses = useStatusClasses(className, _defineProperty({}, "is-".concat(status), true)),

package/lib/components/HelpHint/HelpHint.test.js

@@ -14,7 +14,7 @@ function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyri
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { HelpHint, Link } from '../../index';
-import { fireEvent, render, screen, waitFor } from '../../utils/testUtils/testWrapper';
+import { act, fireEvent, render, screen, waitFor } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'help-hint__button';
@@ -32,12 +32,11 @@ var getComponentWithLink = function getComponentWithLink() {
     href: "https://uilibrary.ping-eng.com/"
   }, "Learn More")));
 };
-
-// Needs to be added to each components test file
-universalComponentTests({
-  renderComponent: function renderComponent(props) {
-    return ___EmotionJSX(HelpHint, _extends({}, defaultProps, props));
-  }
+beforeAll(function () {
+  jest.useFakeTimers();
+});
+afterEach(function () {
+  jest.clearAllMocks();
 });
 test('renders HelpHint component', function () {
   getComponent();
@@ -214,13 +213,16 @@ test('popover closes after closeDelay when mouse leaves trigger', /*#__PURE__*/_
         helpHintButton = screen.getByTestId(testId);
         fireEvent.mouseEnter(helpHintButton);
         fireEvent.mouseLeave(helpHintButton);
-        _context6.next = 7;
-        return waitFor(function () {
+        act(function () {
+          jest.advanceTimersByTime(11);
+        });
+        _context6.next = 8;
+        return act(function () {
           expect(screen.queryByRole('presentation')).not.toBeInTheDocument();
         }, {
           timeout: closeDelay + 1
         });
-      case 7:
+      case 8:
       case "end":
         return _context6.stop();
     }
@@ -236,15 +238,25 @@ test('popover automatically closes in 1000ms after mouse leaves trigger', /*#__P
         helpHintButton = screen.getByTestId(testId);
         fireEvent.mouseEnter(helpHintButton);
         fireEvent.mouseLeave(helpHintButton);
-        _context7.next = 7;
-        return waitFor(function () {
+        act(function () {
+          jest.advanceTimersByTime(1001);
+        });
+        _context7.next = 8;
+        return act(function () {
           expect(screen.queryByRole('presentation')).not.toBeInTheDocument();
         }, {
           timeout: oneSecond + 1
         });
-      case 7:
+      case 8:
       case "end":
         return _context7.stop();
     }
   }, _callee7);
-})));
+})));
+
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(HelpHint, _extends({}, defaultProps, props));
+  }
+});

package/lib/components/Image/Image.js

@@ -4,6 +4,7 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _templateObject;
 var _excluded = ["className", "fallbackImage", "fallbackTimeout", "isDisabled", "src", "alt", "sx", "fallbackAlt"];
+/* istanbul ignore file */
 import React, { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { keyframes } from '@emotion/react';
 import { useHover } from '@react-aria/interactions';
@@ -53,8 +54,6 @@ var Image = /*#__PURE__*/forwardRef(function (props, ref) {
     return setImgAttribute(alt, fallbackAlt);
   }, [alt, isLoading, shouldShowFallback]);
   var imgRef = useLocalOrForwardRef(ref);
-
-  /* istanbul ignore next */
   useImperativeHandle(ref, function () {
     return imgRef.current;
   });

package/lib/components/ImageUploadField/ImageUploadField.test.js

@@ -15,7 +15,7 @@ import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instan
 import React from 'react';
 import { fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { render, screen } from '../../utils/testUtils/testWrapper';
+import { act, render, screen } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import ImageUploadField from './ImageUploadField';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -76,11 +76,15 @@ test('should render image upload component by default', function () {
 test('should render div with icon when focused', function () {
   getComponent();
   var imageUploadButton = screen.getByTestId(testButtonId);
-  imageUploadButton.focus();
+  act(function () {
+    imageUploadButton.focus();
+  });
   var hoveredPreview = screen.getByTestId('image-upload-hovered-preview');
   expect(hoveredPreview).toBeInstanceOf(HTMLDivElement);
   expect(hoveredPreview).toBeInTheDocument();
-  imageUploadButton.blur();
+  act(function () {
+    imageUploadButton.blur();
+  });
   expect(hoveredPreview).not.toBeInTheDocument();
 });
 test('should upload a file', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {

package/lib/components/ListView/ListView.test.js

@@ -27,7 +27,7 @@ import { Item } from 'react-stately';
 import userEvent from '@testing-library/user-event';
 import _ from 'lodash';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
-import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
+import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import Button from '../Button';
 import CheckboxField from '../CheckboxField';
@@ -403,7 +403,9 @@ test('list view not receive focus when click on checkbox', function () {
   var listItem = screen.getAllByRole('gridcell');
   var checkbox = screen.getAllByTestId('TestID');
   expect(listItem[0]).not.toHaveClass('is-focused');
-  checkbox[0].click();
+  act(function () {
+    checkbox[0].click();
+  });
   expect(listItem[0]).not.toHaveClass('is-focused');
 });
 test('list view reset hover on item when scroll', function () {

package/lib/components/Messages/Messages.test.js

@@ -2,12 +2,11 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import React from 'react';
-import { act } from 'react-dom/test-utils';
 import { Item } from 'react-stately';
 import AccountIcon from '@pingux/mdi-react/AccountIcon';
 import userEvent from '@testing-library/user-event';
 import statuses from '../../utils/devUtils/constants/statuses';
-import { render, screen } from '../../utils/testUtils/testWrapper';
+import { act, render, screen } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import { ARIA_STATUSES } from './Message';
 import Messages, { messagesReducerStory, multiMessagesReducerStory } from '.';

package/lib/components/Messages/utils/tests/messagesReducer.test.js

@@ -1,8 +1,7 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React, { useEffect, useReducer } from 'react';
-import { act } from 'react-dom/test-utils';
-import { render, screen } from '../../../../utils/testUtils/testWrapper';
+import { act, render, screen } from '../../../../utils/testUtils/testWrapper';
 import messagesReducer, { addMessage, clearMessages, hideMessage, removeMessage, showMessage } from '../messagesReducer';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-messages';

package/lib/components/Messages/utils/tests/multiMessagesReducer.test.js

@@ -1,8 +1,7 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React, { useEffect, useReducer } from 'react';
-import { act } from 'react-dom/test-utils';
-import { render, screen } from '../../../../utils/testUtils/testWrapper';
+import { act, render, screen } from '../../../../utils/testUtils/testWrapper';
 import multiMessagesReducer, { addMessage, clearMessages, hideMessage, removeMessage, showMessage } from '../multiMessagesReducer';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-messages';

package/lib/components/MultivaluesField/MultivaluesField.test.js

@@ -16,7 +16,7 @@ import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { Item, MultivaluesField, OverlayProvider, Section } from '../../index';
 import statuses from '../../utils/devUtils/constants/statuses';
-import { fireEvent, getDefaultNormalizer, render, screen, within } from '../../utils/testUtils/testWrapper';
+import { act, fireEvent, getDefaultNormalizer, render, screen, within } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var items = [{
@@ -153,10 +153,14 @@ test('closes listbox on blur and fires "onBlur"', function () {
     onBlur: onBlur
   });
   var input = screen.getByRole('combobox');
-  userEvent.tab();
+  act(function () {
+    userEvent.tab();
+  });
   expect(input).toHaveFocus();
   expect(screen.queryByRole('listbox')).toBeInTheDocument();
-  input.blur();
+  act(function () {
+    input.blur();
+  });
   expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
   expect(onBlur).toBeCalled();
 });
@@ -170,7 +174,9 @@ test('opening and closing listbox fires "onOpenChange"', function () {
   expect(input).toHaveFocus();
   expect(screen.queryByRole('listbox')).toBeInTheDocument();
   expect(onOpenChange).toHaveBeenCalledWith(true);
-  input.blur();
+  act(function () {
+    input.blur();
+  });
   expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
   expect(onOpenChange).toHaveBeenCalledWith(false);
 });
@@ -183,10 +189,14 @@ test('multiple selection is enabled, option disappears after selection', functio
   expect(listbox).toHaveAttribute('aria-multiselectable', 'true');
   var options = within(listbox).getAllByRole('option');
   var firstOption = options[0];
-  firstOption.click();
+  act(function () {
+    firstOption.click();
+  });
   expect(firstOption).not.toBeInTheDocument();
   var secondOption = options[1];
-  secondOption.click();
+  act(function () {
+    secondOption.click();
+  });
   expect(secondOption).not.toBeInTheDocument();
 });
 test('updates aria attributes on option focus', function () {
@@ -223,7 +233,9 @@ test('clicking an option renders badge with option name', function () {
   expect(input).toHaveFocus();
   var options = screen.getAllByRole('option');
   var firstOption = options[0];
-  firstOption.click();
+  act(function () {
+    firstOption.click();
+  });
   expect(firstOption).not.toBeInTheDocument();
   var badge = screen.getByText(items[0].name);
   expect(badge).toBeInTheDocument();
@@ -237,7 +249,9 @@ test('after clicking an option, and then clicking the text input, the listbox re
   expect(input).toHaveFocus();
   var options = screen.getAllByRole('option');
   var firstOption = options[0];
-  firstOption.click();
+  act(function () {
+    firstOption.click();
+  });
   expect(firstOption).not.toBeInTheDocument();
   expect(screen.queryByRole('listbox')).toBeInTheDocument();
   userEvent.click(input);
@@ -262,7 +276,9 @@ test('after clicking an option, and then typing a custom input, the listbox rema
         expect(input).toHaveFocus();
         options = screen.getAllByRole('option');
         firstOption = options[0];
-        firstOption.click();
+        act(function () {
+          firstOption.click();
+        });
         expect(firstOption).not.toBeInTheDocument();
         _context.next = 10;
         return userEvent.clear(input);
@@ -288,15 +304,23 @@ test('clicking on delete button deletes selection, and re-adds option to list',
   expect(input).toHaveFocus();
   var options = screen.getAllByRole('option');
   var firstOption = options[0];
-  firstOption.click();
+  act(function () {
+    firstOption.click();
+  });
   expect(firstOption).not.toBeInTheDocument();
   var badge = screen.getByText(items[0].name);
   expect(badge).toBeInTheDocument();
   var deleteButton = badge.nextSibling;
-  deleteButton.click();
+  act(function () {
+    deleteButton.click();
+  });
   expect(badge).not.toBeInTheDocument();
-  input.blur();
-  input.focus();
+  act(function () {
+    input.blur();
+  });
+  act(function () {
+    input.focus();
+  });
   var updatedOptions = screen.getAllByRole('option');
   expect(updatedOptions[0]).toBeInTheDocument();
   expect(updatedOptions[0]).toHaveTextContent(items[0].name);
@@ -312,10 +336,14 @@ test('clicking an option fires "onSelectionChange"', function () {
   var listbox = screen.getByRole('listbox');
   var options = within(listbox).getAllByRole('option');
   var firstOption = options[0];
-  firstOption.click();
+  act(function () {
+    firstOption.click();
+  });
   expect(firstOption).not.toBeInTheDocument();
   var secondOption = options[1];
-  secondOption.click();
+  act(function () {
+    secondOption.click();
+  });
   expect(secondOption).not.toBeInTheDocument();
   expect(onSelectionChange).toBeCalledTimes(2);
   expect(onSelectionChange.mock.calls[0][0].has(items[0].name)).toBeTruthy();
@@ -479,7 +507,9 @@ test('in non-restrictive mode the value that was already selected using the list
   var listbox = screen.getByRole('listbox');
   var options = within(listbox).getAllByRole('option');
   var firstOption = options[0];
-  firstOption.click();
+  act(function () {
+    firstOption.click();
+  });
   expect(onSelectionChange.mock.calls[0][0].has(items[0].name)).toBeTruthy();
   onSelectionChange.mockClear();
   userEvent.type(input, items[0].name);
@@ -656,7 +686,9 @@ test('deleting a single badge via keyboard moves focus to the input', function (
   userEvent.tab();
   var options = screen.getAllByRole('option');
   var firstOption = options[0];
-  firstOption.click();
+  act(function () {
+    firstOption.click();
+  });
   var badge = screen.getByText(items[0].name);
   expect(badge).toBeInTheDocument();
   userEvent.tab({
@@ -679,8 +711,12 @@ test('deleting the last badge via keyboard moves focus to the previous badge', f
   var options = screen.getAllByRole('option');
   var firstOption = options[0];
   var secondOption = options[1];
-  firstOption.click();
-  secondOption.click();
+  act(function () {
+    firstOption.click();
+  });
+  act(function () {
+    secondOption.click();
+  });
   var badge1 = screen.getByText(items[0].name);
   var badge2 = screen.getByText(items[1].name);
   expect(badge1).toBeInTheDocument();
@@ -784,15 +820,23 @@ test('in condensed mode selects and deselects ', function () {
   var buttons = screen.getAllByRole('button');
   var button = buttons[1];
   expect(button).toHaveTextContent('Select All');
-  button.click();
+  act(function () {
+    button.click();
+  });
   expect(button).toHaveTextContent('Deselect All');
   expect(screen.getByText('All Selected')).toBeInTheDocument();
-  firstOption.click();
+  act(function () {
+    firstOption.click();
+  });
   expect(button).toHaveTextContent('Select All');
   expect(screen.getByText('2 Selected')).toBeInTheDocument();
-  button.click();
+  act(function () {
+    button.click();
+  });
   expect(button).toHaveTextContent('Deselect All');
-  button.click();
+  act(function () {
+    button.click();
+  });
   expect(button).toHaveTextContent('Select All');
 });
 test('in condensed mode "onSelectionChange" is called', function () {
@@ -821,7 +865,9 @@ test('opening and closing listbox fires "onOpenChange" in condensed mode', funct
   expect(input).toHaveFocus();
   expect(screen.queryByRole('listbox')).toBeInTheDocument();
   expect(onOpenChange).toHaveBeenCalledWith(true);
-  input.blur();
+  act(function () {
+    input.blur();
+  });
   expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
   expect(onOpenChange).toHaveBeenCalledWith(false);
 });
@@ -884,7 +930,9 @@ test('closes listbox on blur and fires "onBlur"', function () {
   userEvent.tab();
   expect(input).toHaveFocus();
   expect(screen.queryByRole('listbox')).toBeInTheDocument();
-  input.blur();
+  act(function () {
+    input.blur();
+  });
   expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
   expect(onBlur).toBeCalled();
 });
@@ -925,7 +973,9 @@ test('popover closes on input blur', function () {
   var checkboxes = within(listbox).getAllByRole('img');
   expect(checkboxes.length).toBe(3);
   var secondOption = options[1];
-  secondOption.click();
+  act(function () {
+    secondOption.click();
+  });
   var value = 'Aardvark';
   userEvent.type(input, value);
   userEvent.click(document.body);

package/lib/components/NavBar/NavBar.test.js

@@ -15,7 +15,7 @@ import ViewDashboard from '@pingux/mdi-react/ViewDashboardIcon';
 import ViewGridPlusOutline from '@pingux/mdi-react/ViewGridPlusOutlineIcon';
 import userEvent from '@testing-library/user-event';
 import { Box, Button, Link, NavBarItem, NavBarItemButton, NavBarItemLink, NavBarSection } from '../../index';
-import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
+import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import NavBar from './NavBar';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -340,7 +340,9 @@ test('should change focus between NavBarItemHeader on arrow key press', function
   getComponent();
   var headerButtons = screen.getAllByRole('button');
   expect(headerButtons[0]).toBeInTheDocument();
-  headerButtons[0].focus();
+  act(function () {
+    headerButtons[0].focus();
+  });
   expect(headerButtons[0]).toHaveClass('is-focused');
   fireEvent.keyDown(headerButtons[0], {
     key: 'ArrowDown',
@@ -372,7 +374,9 @@ test('should not change focus from NavItemBody to NavBarItemHeader on arrow key
   getComponent();
   var headerButtons = screen.getAllByRole('button');
   expect(headerButtons[0]).toBeInTheDocument();
-  headerButtons[0].click();
+  act(function () {
+    headerButtons[0].click();
+  });
   fireEvent.keyDown(headerButtons[0], {
     key: 'ArrowDown',
     keyCode: 40
@@ -403,7 +407,9 @@ test('should change focus between nav children on arrow key press', function ()
   var link = screen.getByTestId('navLink');
   var button = screen.getByTestId('navButton');
   expect(link).toBeInTheDocument();
-  link.focus();
+  act(function () {
+    link.focus();
+  });
   expect(link).toHaveClass('is-focused');
   fireEvent.keyDown(link, {
     key: 'ArrowDown',

package/lib/components/NavSideBar/NavSideBar.test.js

@@ -2,7 +2,7 @@ import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/inst
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { Box, NavSideBarHeader, NavSideBarItem, NavSideBarSection, NavSideBarSectionItem, Separator } from '../../index';
-import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
+import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import { Earth, EmoticonHappy, Fingerprint, GlobeIcon, Logo, OpenInNew, ViewDashboard, ViewGridPlusOutline } from './icons';
 import NavSideBar from './NavSideBar';
@@ -171,7 +171,9 @@ test('should change focus between NavBarItemHeader on arrow key press', function
   getComponent();
   var headerButtons = screen.getAllByRole('button');
   expect(headerButtons[0]).toBeInTheDocument();
-  headerButtons[0].focus();
+  act(function () {
+    headerButtons[0].focus();
+  });
   expect(headerButtons[0]).toHaveClass('is-focused');
   fireEvent.keyDown(headerButtons[0], {
     key: 'ArrowDown',
@@ -203,7 +205,9 @@ test('should not change focus from NavItemBody to NavBarItemHeader on up/down ar
   getComponent();
   var headerButtons = screen.getAllByRole('button');
   expect(headerButtons[1]).toBeInTheDocument();
-  headerButtons[1].click();
+  act(function () {
+    headerButtons[1].click();
+  });
   fireEvent.keyDown(headerButtons[0], {
     key: 'ArrowDown',
     keyCode: 40
@@ -233,7 +237,9 @@ test('should not change focus from NavItemBody to NavBarItemHeader on left/right
   getComponent();
   var headerButtons = screen.getAllByRole('button');
   expect(headerButtons[1]).toBeInTheDocument();
-  headerButtons[1].click();
+  act(function () {
+    headerButtons[1].click();
+  });
   fireEvent.keyDown(headerButtons[0], {
     key: 'ArrowRight',
     keyCode: 39
@@ -270,10 +276,14 @@ test('expand only one item', function () {
   expect(screen.queryByText('Group')).not.toBeInTheDocument();
   expect(screen.queryByText('Users')).not.toBeInTheDocument();
   var headerButtons = screen.getAllByRole('button');
-  userEvent.click(headerButtons[1]);
+  act(function () {
+    userEvent.click(headerButtons[1]);
+  });
   expect(screen.queryByText('Group')).toBeInTheDocument();
   expect(screen.queryByText('Users')).not.toBeInTheDocument();
-  userEvent.click(headerButtons[2]);
+  act(function () {
+    userEvent.click(headerButtons[2]);
+  });
   expect(screen.queryByText('Group')).not.toBeInTheDocument();
   expect(screen.queryByText('Users')).toBeInTheDocument();
 });

package/lib/components/NumberField/NumberField.test.js

@@ -4,7 +4,7 @@ import { fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { NumberField } from '../../index';
 import statuses from '../../utils/devUtils/constants/statuses';
-import { render, screen } from '../../utils/testUtils/testWrapper';
+import { act, render, screen } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-NumberField';
@@ -73,7 +73,9 @@ test('calling onChange with integer when input value changed (controlled state)'
   var numberInput = screen.queryAllByLabelText(testLabel)[1];
   userEvent.clear(numberInput);
   userEvent.type(numberInput, newTestValue.toString());
-  numberInput.blur();
+  act(function () {
+    numberInput.blur();
+  });
   expect(mockOnChange).toHaveBeenCalledWith(newTestValue);
 });
 test('should be marked as required if isRequired prop if passed', function () {

package/lib/components/PasswordField/PasswordField.js

@@ -118,6 +118,8 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
     overlayProps = _useOverlayPosition.overlayProps,
     placement = _useOverlayPosition.placement,
     updatePosition = _useOverlayPosition.updatePosition;
+
+  /* istanbul ignore next */
   useLayoutEffect(function () {
     if (isFocused) {
       requestAnimationFrame(function () {