refactor unit tests

Author: based-ghost

__tests__/AriaLiveRegion.test.tsx

@@ -2,7 +2,7 @@ import React, { type ComponentProps } from 'react';
 import { render } from '@testing-library/react';
 import AriaLiveRegion from '../src/components/AriaLiveRegion';
 import { getSelectedOptionMulti, ThemeTestHOC } from './helpers';
-import type { FocusedOption, SelectedOption } from '../src/types';
+import type { AriaLiveAttribute, FocusedOption, SelectedOption } from '../src/types';
 import { ARIA_LIVE_CONTEXT_ID, ARIA_LIVE_SELECTION_ID } from '../src/constants';
 
 type AriaLiveRegionProps = ComponentProps<typeof AriaLiveRegion>;
@@ -19,29 +19,26 @@ const renderAriaLiveRegion = (props: AriaLiveRegionProps) => {
   );
 };
 
-const createAriaLiveRegionProps = (): AriaLiveRegionProps => {
-  const selectedOption: SelectedOption[] = getSelectedOptionMulti();
-  const focusedOption: FocusedOption = { index: 0, ...selectedOption[0] };
-
-  return {
-    focusedOption,
-    selectedOption,
-    menuOpen: true,
-    isFocused: true,
-    isSearchable: true,
-    ariaLive: 'polite',
-    inputValue: 'search query',
-    optionCount: selectedOption.length
-  };
-};
+const selectedOption: SelectedOption[] = getSelectedOptionMulti();
+const focusedOption: FocusedOption = { index: 0, ...selectedOption[0] };
+
+const BASE_PROPS: AriaLiveRegionProps = {
+  focusedOption,
+  selectedOption,
+  menuOpen: true,
+  isFocused: true,
+  isSearchable: true,
+  ariaLive: 'polite',
+  inputValue: 'search query',
+  optionCount: selectedOption.length
+} as const;
 
 // ============================================
 // Test cases
 // ============================================
 
-test('AriaLiveRegion component mounts and renders without error & can query childNodes by id attributes', async () => {
-  const props = createAriaLiveRegionProps();
-  const { container } = renderAriaLiveRegion(props);
+test('AriaLiveRegion component mounts and renders without error & can query childNodes by id attributes', () => {
+  const { container } = renderAriaLiveRegion(BASE_PROPS);
   const childNodeIds = [ARIA_LIVE_CONTEXT_ID, ARIA_LIVE_SELECTION_ID];
 
   childNodeIds.forEach((id) => {
@@ -50,11 +47,10 @@ test('AriaLiveRegion component mounts and renders without error & can query chil
   });
 });
 
-test('"ariaLive" prop can be passed as one of the accepted aria-live values and the root A11yText span element reflects it accordingly', async () => {
-  const ariaLive: AriaLiveRegionProps['ariaLive'] = 'assertive';
-  const props = createAriaLiveRegionProps();
-  const mergedProps = { ...props, ariaLive };
-  const { container } = renderAriaLiveRegion(mergedProps);
+test('"ariaLive" prop can be passed as one of the accepted aria-live values and the root A11yText span element reflects it accordingly', () => {
+  const ariaLive: AriaLiveAttribute = 'assertive';
+  const props = { ...BASE_PROPS, ariaLive };
+  const { container } = renderAriaLiveRegion(props);
   const a11yTextRootSpanEl = container.firstChild;
   expect(a11yTextRootSpanEl).toHaveAttribute('aria-live', ariaLive);
 });

__tests__/AutosizeInput.test.tsx

@@ -40,12 +40,12 @@ const BASE_PROPS: AutosizeInputProps = {
 // Test cases
 // ============================================
 
-test('input element has a static className (enables styling via classic CSS)', async () => {
+test('input element has a static className (enables styling via classic CSS)', () => {
   const { getByTestId } = renderAutosizeInput(BASE_PROPS);
   expect(getByTestId(AUTOSIZE_INPUT_TESTID!)).toHaveClass(AUTOSIZE_INPUT_CLS);
 });
 
-test('input has functional, optional ARIA attributes', async () => {
+test('input has functional, optional ARIA attributes', () => {
   const props = {
     ...BASE_PROPS,
     ariaLabel: 'test-label',
@@ -60,7 +60,7 @@ test('input has functional, optional ARIA attributes', async () => {
   });
 });
 
-test('when "id" has a non-empty string value, input element should get an "id" attribute reflecting that value', async () => {
+test('when "id" has a non-empty string value, input element should get an "id" attribute reflecting that value', () => {
   const inputId = 'test-input-id';
   const props = { ...BASE_PROPS, id: inputId };
   const { getByTestId } = renderAutosizeInput(props);
@@ -76,7 +76,7 @@ test('when "readOnly" = true, the onChange event handler should not be attached
   expect(inputElement).toHaveAttribute('readonly');
 });
 
-test('"blur" and "focus" events with callback handlers are attached to the input element', async () => {
+test('"blur" and "focus" events with callback handlers are attached to the input element', () => {
   const { getByTestId } = renderAutosizeInput(BASE_PROPS);
   const inputElement = getByTestId(AUTOSIZE_INPUT_TESTID!);
   fireEvent.blur(inputElement);

__tests__/IndicatorIcons.test.tsx

@@ -47,7 +47,7 @@ const customIconFn = (props: Partial<IndicatorIconsProps>): ReactNode => {
 // Test cases
 // ============================================
 
-test('clear icon has a static className (enables styling via classic CSS)', async () => {
+test('clear icon has a static className (enables styling via classic CSS)', () => {
   const { getByTestId } = renderIndicatorIcons(BASE_PROPS);
   const firstChildOfClearIconElement = getByTestId(CLEAR_ICON_TESTID!).firstChild;
   expect(firstChildOfClearIconElement).toHaveClass(CLEAR_ICON_CLS);
@@ -67,13 +67,13 @@ test('caret indicator has functioning "click" user interactions', async () => {
   expect(onCaretMouseDownSpy).toBeCalled();
 });
 
-test('clear icon is not rendered and loading animation is rendered when "isLoading" = true', async () => {
+test('clear icon is not rendered and loading animation is rendered when "isLoading" = true', () => {
   const props = { ...BASE_PROPS, isLoading: true };
   const { queryByTestId } = renderIndicatorIcons(props);
   expect(queryByTestId(CLEAR_ICON_TESTID!)).toBeNull();
 });
 
-test('loading can render as a custom node (instead of default LoadingDots.tsx component)', async () => {
+test('loading can render as a custom node (instead of default LoadingDots.tsx component)', () => {
   const loadingNodeText = 'loading-node';
   const loadingNode = <span>{loadingNodeText}</span>;
 
@@ -87,15 +87,15 @@ test('loading can render as a custom node (instead of default LoadingDots.tsx co
   expect(getByText(loadingNodeText)).toBeInTheDocument();
 });
 
-test('clear icon can render as a ReactNode', async () => {
+test('clear icon can render as a ReactNode', () => {
   const clearIconText = 'clear-icon-node';
   const clearIcon = <span>{clearIconText}</span>;
   const props = { ...BASE_PROPS, clearIcon };
   const { getByText } = renderIndicatorIcons(props);
   expect(getByText(clearIconText)).toBeInTheDocument();
 });
 
-test('clear icon can render as a callback function with return type of ReactNode - callback accepts forwarded state props from wrapping component.', async () => {
+test('clear icon can render as a callback function with return type of ReactNode - callback accepts forwarded state props from wrapping component.', () => {
   const props = {
     ...BASE_PROPS,
     menuOpen: true,
@@ -110,15 +110,15 @@ test('clear icon can render as a callback function with return type of ReactNode
   expect(getByTestId(forwardedStateId)).toBeInTheDocument();
 });
 
-test('caret icon can render as a ReactNode', async () => {
+test('caret icon can render as a ReactNode', () => {
   const caretIconText = 'caret-icon-node';
   const caretIcon = <span>{caretIconText}</span>;
   const props = { ...BASE_PROPS, caretIcon };
   const { getByText } = renderIndicatorIcons(props);
   expect(getByText(caretIconText)).toBeInTheDocument();
 });
 
-test('caret icon can render as a callback function with return type of ReactNode - callback accepts forwarded state props from wrapping component.', async () => {
+test('caret icon can render as a callback function with return type of ReactNode - callback accepts forwarded state props from wrapping component.', () => {
   const props = { ...BASE_PROPS, menuOpen: true, caretIcon: customIconFn };
   const { getByTestId } = renderIndicatorIcons(props);
 

__tests__/LoadingDots.test.tsx

@@ -19,7 +19,7 @@ const renderAriaLiveRegion = () => {
 // Test cases
 // ============================================
 
-test('LoadingDots component mounts and renders without error', async () => {
+test('LoadingDots component mounts and renders without error', () => {
   const { container } = renderAriaLiveRegion();
   expect(container.hasChildNodes()).toBeTruthy();
 });

__tests__/MenuList.test.tsx

@@ -45,7 +45,7 @@ const BASE_PROPS: MenuListProps = {
 // Test cases
 // ============================================
 
-test('MenuList component mounts and renders successfully when "menuOptions" array has items', async () => {
+test('MenuList component mounts and renders successfully when "menuOptions" array has items', () => {
   const { getByText } = renderMenuList(BASE_PROPS);
 
   // Assert react-window + Option.tsx renders each menuOption correctly
@@ -54,7 +54,7 @@ test('MenuList component mounts and renders successfully when "menuOptions" arra
   });
 });
 
-test('The "itemKeySelector" property is used in "react-window" function property "itemKey" to select unqiue key based on property value rather than using default index for each option', async () => {
+test('The "itemKeySelector" property is used in "react-window" function property "itemKey" to select unqiue key based on property value rather than using default index for each option', () => {
   const props = { ...BASE_PROPS, itemKeySelector: 'value' };
   const { getByText } = renderMenuList(props);
 
@@ -64,23 +64,23 @@ test('The "itemKeySelector" property is used in "react-window" function property
   });
 });
 
-test('The "No Options" message element is NOT rendered when "menuOptions" length > 0', async () => {
+test('The "No Options" message element is NOT rendered when "menuOptions" length > 0', () => {
   const { queryByText } = renderMenuList(BASE_PROPS);
   expect(queryByText(BASE_PROPS.noOptionsMsg!)).toBeNull();
 });
 
-test('The "No Options" message element is rendered when "menuOptions" length === 0', async () => {
+test('The "No Options" message element is rendered when "menuOptions" length === 0', () => {
   const props = { ...BASE_PROPS, menuOptions: [] };
   const { getByText } = renderMenuList(props);
   expect(getByText(props.noOptionsMsg!)).toBeInTheDocument();
 });
 
-test('The "Loading" message element is NOT rendered when "isLoading" !== true', async () => {
+test('The "Loading" message element is NOT rendered when "isLoading" !== true', () => {
   const { queryByText } = renderMenuList(BASE_PROPS);
   expect(queryByText(BASE_PROPS.loadingMsg)).toBeNull();
 });
 
-test('The "Loading" message element is rendered when "isLoading" === true', async () => {
+test('The "Loading" message element is rendered when "isLoading" === true', () => {
   const props = { ...BASE_PROPS, isLoading: true };
   const { getByText } = renderMenuList(props);
   expect(getByText(props.loadingMsg)).toBeInTheDocument();

__tests__/MultiValue.test.tsx

@@ -25,12 +25,12 @@ const renderMultiValue = (props: MultiValueProps) => {
 const removeSelectedOptionSpy = jest.fn();
 const renderOptionLabelSpy = renderOptionLabelMock;
 
-const DATA: Option = getOptionSingle();
+const data: Option = getOptionSingle();
 
 const BASE_PROPS: MultiValueProps = {
-  data: DATA,
+  data,
   isFocused: false,
-  value: DATA.value,
+  value: data.value,
   renderOptionLabel: renderOptionLabelSpy,
   removeSelectedOption: removeSelectedOptionSpy
 } as const;
@@ -39,7 +39,7 @@ const BASE_PROPS: MultiValueProps = {
 // Test cases
 // ============================================
 
-test('"renderOptionLabel" callback should be executed and should render the selected option label text', async () => {
+test('"renderOptionLabel" callback should be executed and should render the selected option label text', () => {
   const { getByText } = renderMultiValue(BASE_PROPS);
   expect(renderOptionLabelSpy).toBeCalled();
   expect(getByText(BASE_PROPS.data.label)).toBeInTheDocument();

__tests__/Option.test.tsx

@@ -62,15 +62,15 @@ const createOptionProps = (
 // Test cases
 // ============================================
 
-test('option parent element renders dynamic style attribute correctly', async () => {
+test('option parent element renders dynamic style attribute correctly', () => {
   const { props } = createOptionProps();
   const { container } = renderOption(props);
   const optionParentEl = container.querySelector('div');
   const optionCssProps = stringifyCSSProperties(OPTION_STYLE);
   expect(optionParentEl).toHaveAttribute('style', optionCssProps);
 });
 
-test('"renderOptionLabel" callback should be executed and the result rendered to DOM', async () => {
+test('"renderOptionLabel" callback should be executed and the result rendered to DOM', () => {
   const { props, renderOptionLabelSpy } = createOptionProps();
   const { label } = props.data.menuOptions[props.index];
   const { getByText } = renderOption(props);
@@ -79,13 +79,11 @@ test('"renderOptionLabel" callback should be executed and the result rendered to
 });
 
 test(`option with "isDisabled" = TRUE should have an onClick handler and the ${OPTION_DISABLED_CLS} class added to its classList`, async () => {
-  const firstDisabledMenuOptionIndex = MENU_OPTIONS.findIndex((option) => !!option.isDisabled);
-  const { props, onClickSelectOptionSpy } = createOptionProps(firstDisabledMenuOptionIndex);
+  const firstDisabledIdx = MENU_OPTIONS.findIndex((x) => x.isDisabled);
+  const { props, onClickSelectOptionSpy } = createOptionProps(firstDisabledIdx);
   const { user, container } = renderOption(props);
   const optionParentEl = container.querySelector('div') as HTMLDivElement;
-
   await user.click(optionParentEl);
-
   expect(onClickSelectOptionSpy).toBeCalled();
   expect(optionParentEl).toHaveClass(OPTION_DISABLED_CLS);
 });

__tests__/ReactSSR.test.tsx

@@ -2,6 +2,6 @@ import React from 'react';
 import { Select } from '../src';
 import { renderToString } from 'react-dom/server';
 
-test('Select component can be rendered using react-dom/server', async () => {
-  expect(() => renderToString(<Select />)).not.toThrow();
+test('Select component can be rendered using react-dom/server', () => {
+  expect(() => renderToString(<Select />)).not.toThrowError();
 });

__tests__/Select.test.tsx

@@ -27,14 +27,14 @@ const renderSelect = (props?: SelectProps) => ({
 // Test cases
 // ============================================
 
-test('container elements have static className value (enables styling via classic CSS)', async () => {
+test('container elements have static className value (enables styling via classic CSS)', () => {
   const { getByTestId } = renderSelect();
   expect(getByTestId(SELECT_CONTAINER_TESTID!)).toHaveClass(SELECT_CONTAINER_CLS);
   expect(getByTestId(CONTROL_CONTAINER_TESTID!)).toHaveClass(CONTROL_CONTAINER_CLS);
   expect(getByTestId(MENU_CONTAINER_TESTID!)).toHaveClass(MENU_CONTAINER_CLS);
 });
 
-test('id attributes are added to DOM if defined ("menuId", "selectId", "inputId" props)', async () => {
+test('id attributes are added to DOM if defined ("menuId", "selectId", "inputId" props)', () => {
   const props = {
     menuId: 'test-menu-id',
     inputId: 'test-input-id',
@@ -46,15 +46,15 @@ test('id attributes are added to DOM if defined ("menuId", "selectId", "inputId"
   expect(getByTestId(SELECT_CONTAINER_TESTID!)).toHaveAttribute('id', props.selectId);
 });
 
-test('"onInputFocus" callback should be fired when input is focused (if a defined function)', async () => {
+test('"onInputFocus" callback should be fired when input is focused (if a defined function)', () => {
   const onFocusSpy = jest.fn();
   const props = { onInputFocus: onFocusSpy };
   const { getByTestId } = renderSelect(props);
   fireEvent.focus(getByTestId(AUTOSIZE_INPUT_TESTID!));
   expect(onFocusSpy).toBeCalled();
 });
 
-test('"onInputBlur" callback should be fired on blur (if a defined function)', async () => {
+test('"onInputBlur" callback should be fired on blur (if a defined function)', () => {
   const onBlurSpy = jest.fn();
   const props = { onInputBlur: onBlurSpy };
   const { getByTestId } = renderSelect(props);
@@ -79,7 +79,8 @@ test('toggling the menu to open/close fires corresponding callbacks "onMenuOpen"
   expect(onMenuCloseSpy).toBeCalled();
 });
 
-test('When "lazyLoadMenu" property = true, then menu components are only rendered in DOM when "menuOpen" state = true', async () => {
-  const { queryByTestId } = renderSelect({ lazyLoadMenu: true });
+test('When "lazyLoadMenu" property = true, then menu components are only rendered in DOM when "menuOpen" state = true', () => {
+  const props = { lazyLoadMenu: true };
+  const { queryByTestId } = renderSelect(props);
   expect(queryByTestId(MENU_CONTAINER_TESTID!)).toBeNull();
 });

__tests__/Value.test.tsx

@@ -21,7 +21,7 @@ const renderValue = (props: ValueProps) => {
 
 const rerenderValue = (
   props: ValueProps,
-  rerender: (...args: any[]) => void
+  rerender: (...args: any[]) => any
 ): void => {
   rerender(
     <ThemeTestHOC>
@@ -49,12 +49,12 @@ const BASE_PROPS: ValueProps = {
 // Test cases
 // ============================================
 
-test('"placeholder" text displays when no option is selected', async () => {
+test('"placeholder" text displays when no option is selected', () => {
   const { getByText } = renderValue(BASE_PROPS);
   expect(getByText(PLACEHOLDER_DEFAULT)).toBeInTheDocument();
 });
 
-test('component renders NULL if "hasInput" is true AND ("isMulti" !== true OR ("isMulti" === true AND "selectedOptions" is empty))', async () => {
+test('component renders NULL if "hasInput" is true AND ("isMulti" !== true OR ("isMulti" === true AND "selectedOptions" is empty))', () => {
   // Render with truthy "inputValue" and "isMulti" = false
   const singleProps = { ...BASE_PROPS, hasInput: true };
   const { container, rerender } = renderValue(singleProps);
@@ -66,7 +66,7 @@ test('component renders NULL if "hasInput" is true AND ("isMulti" !== true OR ("
   expect(container.hasChildNodes()).toBeFalsy();
 });
 
-test('"renderOptionLabel" callback should be executed when an option is selected and should render the selected option label text', async () => {
+test('"renderOptionLabel" callback should be executed when an option is selected and should render the selected option label text', () => {
   const selectedOption = getSelectedOptionSingle();
   const props = { ...BASE_PROPS, selectedOption };
   const { getByText } = renderValue(props);
@@ -78,7 +78,7 @@ test('"renderOptionLabel" callback should be executed when an option is selected
   });
 });
 
-test('"renderMultiOptions" callback should be executed when "isMulti" = true and "renderMultiOptions" is a function and at least one option is selected', async () => {
+test('"renderMultiOptions" callback should be executed when "isMulti" = true and "renderMultiOptions" is a function and at least one option is selected', () => {
   const props = {
     ...BASE_PROPS,
     isMulti: true,

package.json

@@ -88,7 +88,7 @@
     "jest-environment-jsdom": "^29.3.1",
     "jest-enzyme": "^7.1.2",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.0",
+    "prettier": "^2.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-syntax-highlighter": "^15.5.0",