From 3da3d94c267f0da175ad786d4702e888a573b250 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Thu, 3 Apr 2025 08:44:59 -0400
Subject: [PATCH 1/2] chore(List): updated unit tests

---
 .../react-core/src/components/List/List.tsx   |   3 +
 .../components/List/__tests__/List.test.tsx   | 194 ++++++-------
 .../__snapshots__/List.test.tsx.snap          | 265 +-----------------
 test.setup.ts                                 |   2 +
 4 files changed, 101 insertions(+), 363 deletions(-)
 create mode 100644 test.setup.ts

diff --git a/packages/react-core/src/components/List/List.tsx b/packages/react-core/src/components/List/List.tsx
index d76842de30d..a57b58aa283 100644
--- a/packages/react-core/src/components/List/List.tsx
+++ b/packages/react-core/src/components/List/List.tsx
@@ -49,12 +49,14 @@ export const List: React.FunctionComponent<ListProps> = ({
   type = OrderType.number,
   ref = null,
   component = ListComponent.ul,
+  'aria-label': ariaLabel,
   ...props
 }: ListProps) =>
   component === ListComponent.ol ? (
     <ol
       ref={ref as React.Ref<HTMLOListElement>}
       type={type}
+      aria-label={ariaLabel}
       {...(isPlain && { role: 'list' })}
       {...props}
       className={css(
@@ -71,6 +73,7 @@ export const List: React.FunctionComponent<ListProps> = ({
   ) : (
     <ul
       ref={ref as React.Ref<HTMLUListElement>}
+      aria-label={ariaLabel}
       {...(isPlain && { role: 'list' })}
       {...props}
       className={css(
diff --git a/packages/react-core/src/components/List/__tests__/List.test.tsx b/packages/react-core/src/components/List/__tests__/List.test.tsx
index c9e13bea094..8140078eb6d 100644
--- a/packages/react-core/src/components/List/__tests__/List.test.tsx
+++ b/packages/react-core/src/components/List/__tests__/List.test.tsx
@@ -1,117 +1,107 @@
 import { render, screen } from '@testing-library/react';
-
-import BookOpen from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
-import Key from '@patternfly/react-icons/dist/esm/icons/key-icon';
-import Desktop from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
 import { List, ListVariant, ListComponent, OrderType } from '../List';
-import { ListItem } from '../ListItem';
-
-const ListItems = () => (
-  <List>
-    <ListItem>First</ListItem>
-    <ListItem>Second</ListItem>
-    <ListItem>Third</ListItem>
-  </List>
-);
-
-describe('List', () => {
-  test('simple list', () => {
-    const { asFragment } = render(
-      <List>
-        <ListItems />
-      </List>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+import styles from '@patternfly/react-styles/css/components/List/list';
 
-  test('inline list', () => {
-    const { asFragment } = render(
-      <List variant={ListVariant.inline}>
-        <ListItems />
-      </List>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+describe('Shared tests between ol and ul lists', () => {
+  Object.values(ListComponent).forEach((component) => {
+    test(`Renders without children for ${component} list`, () => {
+      render(<List component={component}></List>);
 
-  test('ordered list', () => {
-    const { asFragment } = render(
-      <List component={ListComponent.ol}>
-        <ListItem>Apple</ListItem>
-        <ListItem>Banana</ListItem>
-        <ListItem>Orange</ListItem>
-      </List>
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
+      expect(screen.getByRole('list')).toBeVisible();
+    });
 
-  test('ordered list starts with 2nd item', () => {
-    render(
-      <List component={ListComponent.ol} start={2}>
-        <ListItem>Banana</ListItem>
-        <ListItem>Orange</ListItem>
-      </List>
-    );
-    expect(screen.getByRole('list')).toHaveAttribute('start', '2');
-  });
+    test(`Renders children for ${component} list`, () => {
+      render(<List component={component}>Children content</List>);
 
-  test('ordered list items will be numbered with uppercase letters', () => {
-    render(
-      <List component={ListComponent.ol} type={OrderType.uppercaseLetter}>
-        <ListItem>Banana</ListItem>
-        <ListItem>Orange</ListItem>
-      </List>
-    );
-    expect(screen.getByRole('list')).toHaveAttribute('type', 'A');
-  });
+      expect(screen.getByRole('list')).toHaveTextContent('Children content');
+    });
 
-  test('inlined ordered list', () => {
-    render(
-      <List variant={ListVariant.inline} component={ListComponent.ol}>
-        <ListItem>Apple</ListItem>
-        <ListItem>Banana</ListItem>
-        <ListItem>Orange</ListItem>
-      </List>
-    );
-    expect(screen.getByRole('list')).toHaveClass('pf-m-inline');
-  });
+    test(`Renders with ${component} tag`, () => {
+      render(<List component={component}></List>);
 
-  test('bordered list', () => {
-    render(
-      <List isBordered>
-        <ListItems />
-      </List>
-    );
-    expect(screen.getAllByRole('list')[0]).toHaveClass('pf-m-bordered');
-  });
+      expect(screen.getByRole('list').tagName).toBe(component.toUpperCase());
+    });
+
+    test(`Renders with only class ${styles.list} by default for ${component} list`, () => {
+      render(<List component={component}></List>);
+
+      expect(screen.getByRole('list')).toHaveClass(styles.list, { exact: true });
+    });
+
+    test(`Renders with custom class when className is passed for ${component} list`, () => {
+      render(<List component={component} className="custom-class"></List>);
+
+      expect(screen.getByRole('list')).toHaveClass('custom-class');
+    });
+
+    test(`Renders with variant class ${styles.modifiers.inline} when variant prop is inline for ${component} list`, () => {
+      render(<List component={component} variant={ListVariant.inline}></List>);
+
+      expect(screen.getByRole('list')).toHaveClass(styles.modifiers.inline);
+    });
+
+    test(`Renders with class ${styles.modifiers.bordered} when isBordered is true for ${component} list`, () => {
+      render(<List component={component} isBordered></List>);
+
+      expect(screen.getByRole('list')).toHaveClass(styles.modifiers.bordered);
+    });
+
+    test(`Renders with class ${styles.modifiers.plain} when isPlain is true for ${component} list`, () => {
+      render(<List component={component} isPlain></List>);
 
-  test('plain list', () => {
-    render(
-      <List isPlain>
-        <ListItems />
-      </List>
-    );
-    expect(screen.getAllByRole('list')[0]).toHaveClass('pf-m-plain');
+      expect(screen.getByRole('list')).toHaveClass(styles.modifiers.plain);
+    });
+
+    test(`Renders with class ${styles.modifiers.iconLg} when iconSize is "large" for ${component} list`, () => {
+      render(<List component={component} iconSize="large"></List>);
+
+      expect(screen.getByRole('list')).toHaveClass(styles.modifiers.iconLg);
+    });
+
+    test(`Renders with aria-label for ${component} list`, () => {
+      render(<List component={component} aria-label="Testing stuff"></List>);
+
+      expect(screen.getByRole('list')).toHaveAccessibleName('Testing stuff');
+    });
+
+    test(`Renders with spread props for ${component} list`, () => {
+      render(<List component={component} id="Test ID"></List>);
+
+      expect(screen.getByRole('list')).toHaveAttribute('id', 'Test ID');
+    });
+
+    test(`Does not render with role attribute when isPlain is false for ${component} list`, () => {
+      render(<List component={component}></List>);
+
+      expect(screen.getByRole('list')).not.toHaveAttribute('role');
+    });
+
+    test(`Renders with role attribute of "list" when isPlain is true for ${component} list`, () => {
+      render(<List component={component} isPlain></List>);
+
+      expect(screen.getByRole('list')).toHaveAttribute('role', 'list');
+    });
+
+    test(`Matches snapshot for ${component} list`, () => {
+      const { asFragment } = render(<List component={component}></List>);
+
+      expect(asFragment()).toMatchSnapshot();
+    });
   });
+});
+
+describe('Ol component list', () => {
+  test(`Renders with type attribute when type is passed`, () => {
+    render(<List component={ListComponent.ol} type={OrderType.lowercaseRomanNumber}></List>);
 
-  test('icon list', () => {
-    const { asFragment } = render(
-      <List isPlain>
-        <ListItem icon={<BookOpen />}>Apple</ListItem>
-        <ListItem icon={<Key />}>Banana</ListItem>
-        <ListItem icon={<Desktop />}>Orange</ListItem>
-      </List>
-    );
-    expect(asFragment()).toMatchSnapshot();
+    expect(screen.getByRole('list')).toHaveAttribute('type', 'i');
   });
+});
+
+describe('Ul component list', () => {
+  test(`Does not render with type attribute when type is passed`, () => {
+    render(<List type={OrderType.lowercaseRomanNumber}></List>);
 
-  test('icon large list', () => {
-    const { asFragment } = render(
-      <List iconSize="large">
-        <ListItem icon={<BookOpen />}>Apple</ListItem>
-        <ListItem icon={<Key />}>Banana</ListItem>
-        <ListItem icon={<Desktop />}>Orange</ListItem>
-      </List>
-    );
-    expect(asFragment()).toMatchSnapshot();
+    expect(screen.getByRole('list')).not.toHaveAttribute('type');
   });
 });
diff --git a/packages/react-core/src/components/List/__tests__/__snapshots__/List.test.tsx.snap b/packages/react-core/src/components/List/__tests__/__snapshots__/List.test.tsx.snap
index 1a3a92f7f23..fc1261ba44f 100644
--- a/packages/react-core/src/components/List/__tests__/__snapshots__/List.test.tsx.snap
+++ b/packages/react-core/src/components/List/__tests__/__snapshots__/List.test.tsx.snap
@@ -1,275 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`List icon large list 1`] = `
-<DocumentFragment>
-  <ul
-    class="pf-v6-c-list pf-m-icon-lg"
-  >
-    <li
-      class="pf-v6-c-list__item"
-    >
-      <span
-        class="pf-v6-c-list__item-icon"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 576 512"
-          width="1em"
-        >
-          <path
-            d="M542.22 32.05c-54.8 3.11-163.72 14.43-230.96 55.59-4.64 2.84-7.27 7.89-7.27 13.17v363.87c0 11.55 12.63 18.85 23.28 13.49 69.18-34.82 169.23-44.32 218.7-46.92 16.89-.89 30.02-14.43 30.02-30.66V62.75c.01-17.71-15.35-31.74-33.77-30.7zM264.73 87.64C197.5 46.48 88.58 35.17 33.78 32.05 15.36 31.01 0 45.04 0 62.75V400.6c0 16.24 13.13 29.78 30.02 30.66 49.49 2.6 149.59 12.11 218.77 46.95 10.62 5.35 23.21-1.94 23.21-13.46V100.63c0-5.29-2.62-10.14-7.27-12.99z"
-          />
-        </svg>
-      </span>
-      <span
-        class="pf-v6-c-list__item-text"
-      >
-        Apple
-      </span>
-    </li>
-    <li
-      class="pf-v6-c-list__item"
-    >
-      <span
-        class="pf-v6-c-list__item-icon"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 1024 1024"
-          width="1em"
-        >
-          <path
-            d="M802,320 C748.980664,320 706,277.019336 706,224 C706,170.980664 748.980664,128 802,128 C855.019336,128 898,170.980664 898,224 C898,277.019336 855.019336,320 802,320 M704,0 C527.3,0 384,143.3 384,320 C383.937788,357.490503 390.505571,394.696657 403.4,429.9 L0,824.1 L0,1024 L192,1024 L192,896 L320,896 L320,768 L448,768 L597,622 C596.906403,621.881923 596.838304,621.745723 596.8,621.6 C631.220126,633.811107 667.47802,640.034477 704,640 C880.7,640 1024,496.7 1024,320 C1024,143.3 880.7,0 704,0"
-          />
-        </svg>
-      </span>
-      <span
-        class="pf-v6-c-list__item-text"
-      >
-        Banana
-      </span>
-    </li>
-    <li
-      class="pf-v6-c-list__item"
-    >
-      <span
-        class="pf-v6-c-list__item-icon"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 576 512"
-          width="1em"
-        >
-          <path
-            d="M528 0H48C21.5 0 0 21.5 0 48v320c0 26.5 21.5 48 48 48h192l-16 48h-72c-13.3 0-24 10.7-24 24s10.7 24 24 24h272c13.3 0 24-10.7 24-24s-10.7-24-24-24h-72l-16-48h192c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zm-16 352H64V64h448v288z"
-          />
-        </svg>
-      </span>
-      <span
-        class="pf-v6-c-list__item-text"
-      >
-        Orange
-      </span>
-    </li>
-  </ul>
-</DocumentFragment>
-`;
-
-exports[`List icon list 1`] = `
-<DocumentFragment>
-  <ul
-    class="pf-v6-c-list pf-m-plain"
-    role="list"
-  >
-    <li
-      class="pf-v6-c-list__item"
-    >
-      <span
-        class="pf-v6-c-list__item-icon"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 576 512"
-          width="1em"
-        >
-          <path
-            d="M542.22 32.05c-54.8 3.11-163.72 14.43-230.96 55.59-4.64 2.84-7.27 7.89-7.27 13.17v363.87c0 11.55 12.63 18.85 23.28 13.49 69.18-34.82 169.23-44.32 218.7-46.92 16.89-.89 30.02-14.43 30.02-30.66V62.75c.01-17.71-15.35-31.74-33.77-30.7zM264.73 87.64C197.5 46.48 88.58 35.17 33.78 32.05 15.36 31.01 0 45.04 0 62.75V400.6c0 16.24 13.13 29.78 30.02 30.66 49.49 2.6 149.59 12.11 218.77 46.95 10.62 5.35 23.21-1.94 23.21-13.46V100.63c0-5.29-2.62-10.14-7.27-12.99z"
-          />
-        </svg>
-      </span>
-      <span
-        class="pf-v6-c-list__item-text"
-      >
-        Apple
-      </span>
-    </li>
-    <li
-      class="pf-v6-c-list__item"
-    >
-      <span
-        class="pf-v6-c-list__item-icon"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 1024 1024"
-          width="1em"
-        >
-          <path
-            d="M802,320 C748.980664,320 706,277.019336 706,224 C706,170.980664 748.980664,128 802,128 C855.019336,128 898,170.980664 898,224 C898,277.019336 855.019336,320 802,320 M704,0 C527.3,0 384,143.3 384,320 C383.937788,357.490503 390.505571,394.696657 403.4,429.9 L0,824.1 L0,1024 L192,1024 L192,896 L320,896 L320,768 L448,768 L597,622 C596.906403,621.881923 596.838304,621.745723 596.8,621.6 C631.220126,633.811107 667.47802,640.034477 704,640 C880.7,640 1024,496.7 1024,320 C1024,143.3 880.7,0 704,0"
-          />
-        </svg>
-      </span>
-      <span
-        class="pf-v6-c-list__item-text"
-      >
-        Banana
-      </span>
-    </li>
-    <li
-      class="pf-v6-c-list__item"
-    >
-      <span
-        class="pf-v6-c-list__item-icon"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 576 512"
-          width="1em"
-        >
-          <path
-            d="M528 0H48C21.5 0 0 21.5 0 48v320c0 26.5 21.5 48 48 48h192l-16 48h-72c-13.3 0-24 10.7-24 24s10.7 24 24 24h272c13.3 0 24-10.7 24-24s-10.7-24-24-24h-72l-16-48h192c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zm-16 352H64V64h448v288z"
-          />
-        </svg>
-      </span>
-      <span
-        class="pf-v6-c-list__item-text"
-      >
-        Orange
-      </span>
-    </li>
-  </ul>
-</DocumentFragment>
-`;
-
-exports[`List inline list 1`] = `
-<DocumentFragment>
-  <ul
-    class="pf-v6-c-list pf-m-inline"
-  >
-    <ul
-      class="pf-v6-c-list"
-    >
-      <li
-        class=""
-      >
-        <span>
-          First
-        </span>
-      </li>
-      <li
-        class=""
-      >
-        <span>
-          Second
-        </span>
-      </li>
-      <li
-        class=""
-      >
-        <span>
-          Third
-        </span>
-      </li>
-    </ul>
-  </ul>
-</DocumentFragment>
-`;
-
-exports[`List ordered list 1`] = `
+exports[`Shared tests between ol and ul lists Matches snapshot for ol list 1`] = `
 <DocumentFragment>
   <ol
     class="pf-v6-c-list"
     type="1"
-  >
-    <li
-      class=""
-    >
-      <span>
-        Apple
-      </span>
-    </li>
-    <li
-      class=""
-    >
-      <span>
-        Banana
-      </span>
-    </li>
-    <li
-      class=""
-    >
-      <span>
-        Orange
-      </span>
-    </li>
-  </ol>
+  />
 </DocumentFragment>
 `;
 
-exports[`List simple list 1`] = `
+exports[`Shared tests between ol and ul lists Matches snapshot for ul list 1`] = `
 <DocumentFragment>
   <ul
     class="pf-v6-c-list"
-  >
-    <ul
-      class="pf-v6-c-list"
-    >
-      <li
-        class=""
-      >
-        <span>
-          First
-        </span>
-      </li>
-      <li
-        class=""
-      >
-        <span>
-          Second
-        </span>
-      </li>
-      <li
-        class=""
-      >
-        <span>
-          Third
-        </span>
-      </li>
-    </ul>
-  </ul>
+  />
 </DocumentFragment>
 `;
diff --git a/test.setup.ts b/test.setup.ts
new file mode 100644
index 00000000000..52b79e9723a
--- /dev/null
+++ b/test.setup.ts
@@ -0,0 +1,2 @@
+// Add custom jest matchers from jest-dom
+import '@testing-library/jest-dom';

From 5d9be8d4305feb6fcee06590cef594271c74cd78 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Thu, 3 Apr 2025 09:17:23 -0400
Subject: [PATCH 2/2] Added tests for ListItem

---
 .../src/components/List/ListItem.tsx          | 11 ++--
 .../__tests__/Generated/ListItem.test.tsx     | 12 -----
 .../__snapshots__/ListItem.test.tsx.snap      | 13 -----
 .../components/List/__tests__/List.test.tsx   | 12 +++--
 .../List/__tests__/ListItem.test.tsx          | 51 +++++++++++++++++++
 .../__snapshots__/ListItem.test.tsx.snap      | 34 +++++++++++++
 6 files changed, 101 insertions(+), 32 deletions(-)
 delete mode 100644 packages/react-core/src/components/List/__tests__/Generated/ListItem.test.tsx
 delete mode 100644 packages/react-core/src/components/List/__tests__/Generated/__snapshots__/ListItem.test.tsx.snap
 create mode 100644 packages/react-core/src/components/List/__tests__/ListItem.test.tsx
 create mode 100644 packages/react-core/src/components/List/__tests__/__snapshots__/ListItem.test.tsx.snap

diff --git a/packages/react-core/src/components/List/ListItem.tsx b/packages/react-core/src/components/List/ListItem.tsx
index e9b0e86301d..993c2ea97e4 100644
--- a/packages/react-core/src/components/List/ListItem.tsx
+++ b/packages/react-core/src/components/List/ListItem.tsx
@@ -2,18 +2,21 @@ import styles from '@patternfly/react-styles/css/components/List/list';
 import { css } from '@patternfly/react-styles';
 
 export interface ListItemProps extends React.HTMLProps<HTMLLIElement> {
-  /** Icon for the list item */
-  icon?: React.ReactNode | null;
+  /** Additional classes added to the list item */
+  className?: string;
   /** Anything that can be rendered inside of list item */
   children: React.ReactNode;
+  /** Icon for the list item */
+  icon?: React.ReactNode | null;
 }
 
 export const ListItem: React.FunctionComponent<ListItemProps> = ({
-  icon = null,
+  className,
   children = null,
+  icon = null,
   ...props
 }: ListItemProps) => (
-  <li className={css(icon && styles.listItem)} {...props}>
+  <li className={css(icon && styles.listItem, className)} {...props}>
     {icon && <span className={css(styles.listItemIcon)}>{icon}</span>}
     <span className={icon && css(`${styles.list}__item-text`)}>{children}</span>
   </li>
diff --git a/packages/react-core/src/components/List/__tests__/Generated/ListItem.test.tsx b/packages/react-core/src/components/List/__tests__/Generated/ListItem.test.tsx
deleted file mode 100644
index 9eb4309f382..00000000000
--- a/packages/react-core/src/components/List/__tests__/Generated/ListItem.test.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * This test was generated
- */
-import { render } from '@testing-library/react';
-import { ListItem } from '../../ListItem';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
-
-it('ListItem should match snapshot (auto-generated)', () => {
-  const { asFragment } = render(<ListItem children={<>ReactNode</>} />);
-  expect(asFragment()).toMatchSnapshot();
-});
diff --git a/packages/react-core/src/components/List/__tests__/Generated/__snapshots__/ListItem.test.tsx.snap b/packages/react-core/src/components/List/__tests__/Generated/__snapshots__/ListItem.test.tsx.snap
deleted file mode 100644
index 432ecd7f726..00000000000
--- a/packages/react-core/src/components/List/__tests__/Generated/__snapshots__/ListItem.test.tsx.snap
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ListItem should match snapshot (auto-generated) 1`] = `
-<DocumentFragment>
-  <li
-    class=""
-  >
-    <span>
-      ReactNode
-    </span>
-  </li>
-</DocumentFragment>
-`;
diff --git a/packages/react-core/src/components/List/__tests__/List.test.tsx b/packages/react-core/src/components/List/__tests__/List.test.tsx
index 8140078eb6d..3193f31622d 100644
--- a/packages/react-core/src/components/List/__tests__/List.test.tsx
+++ b/packages/react-core/src/components/List/__tests__/List.test.tsx
@@ -64,7 +64,7 @@ describe('Shared tests between ol and ul lists', () => {
       expect(screen.getByRole('list')).toHaveAccessibleName('Testing stuff');
     });
 
-    test(`Renders with spread props for ${component} list`, () => {
+    test(`Spreads additional props when passed for ${component} list`, () => {
       render(<List component={component} id="Test ID"></List>);
 
       expect(screen.getByRole('list')).toHaveAttribute('id', 'Test ID');
@@ -91,10 +91,16 @@ describe('Shared tests between ol and ul lists', () => {
 });
 
 describe('Ol component list', () => {
+  test(`Renders with type of "1" by default`, () => {
+    render(<List component={ListComponent.ol}></List>);
+
+    expect(screen.getByRole('list')).toHaveAttribute('type', '1');
+  });
+
   test(`Renders with type attribute when type is passed`, () => {
-    render(<List component={ListComponent.ol} type={OrderType.lowercaseRomanNumber}></List>);
+    render(<List component={ListComponent.ol} type={OrderType.uppercaseLetter}></List>);
 
-    expect(screen.getByRole('list')).toHaveAttribute('type', 'i');
+    expect(screen.getByRole('list')).toHaveAttribute('type', 'A');
   });
 });
 
diff --git a/packages/react-core/src/components/List/__tests__/ListItem.test.tsx b/packages/react-core/src/components/List/__tests__/ListItem.test.tsx
new file mode 100644
index 00000000000..fe099c79c11
--- /dev/null
+++ b/packages/react-core/src/components/List/__tests__/ListItem.test.tsx
@@ -0,0 +1,51 @@
+import { render, screen } from '@testing-library/react';
+import { ListItem } from '../ListItem';
+import styles from '@patternfly/react-styles/css/components/List/list';
+
+test('Renders with children', () => {
+  render(<ListItem>List item content</ListItem>);
+
+  expect(screen.getByRole('listitem')).toHaveTextContent('List item content');
+});
+
+test(`Does not render with a class by default`, () => {
+  render(<ListItem>List item content</ListItem>);
+
+  expect(screen.getByRole('listitem')).not.toHaveClass();
+});
+
+test(`Renders with custom class when className is passed`, () => {
+  render(<ListItem className="test-class">List item content</ListItem>);
+
+  expect(screen.getByRole('listitem')).toHaveClass('test-class', { exact: true });
+});
+
+test(`Renders with icon content when icon prop is passed`, () => {
+  render(<ListItem icon={<div>Icon content</div>}>List item content</ListItem>);
+
+  expect(screen.getByRole('listitem')).toContainHTML('<div>Icon content</div>');
+});
+
+test(`Renders with class ${styles.listItem} when icon prop is passed`, () => {
+  render(<ListItem icon={<div>Icon content</div>}>List item content</ListItem>);
+
+  expect(screen.getByRole('listitem')).toHaveClass(styles.listItem, { exact: true });
+});
+
+test(`Spreads additional props when passed`, () => {
+  render(<ListItem id="test-ID">List item content</ListItem>);
+
+  expect(screen.getByRole('listitem')).toHaveAttribute('id', 'test-ID');
+});
+
+test('Matches snapshot without icon', () => {
+  const { asFragment } = render(<ListItem>List item content</ListItem>);
+
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches snapshot with icon', () => {
+  const { asFragment } = render(<ListItem icon={<div>Icon content</div>}>List item content</ListItem>);
+
+  expect(asFragment()).toMatchSnapshot();
+});
diff --git a/packages/react-core/src/components/List/__tests__/__snapshots__/ListItem.test.tsx.snap b/packages/react-core/src/components/List/__tests__/__snapshots__/ListItem.test.tsx.snap
new file mode 100644
index 00000000000..b4d45faf665
--- /dev/null
+++ b/packages/react-core/src/components/List/__tests__/__snapshots__/ListItem.test.tsx.snap
@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches snapshot with icon 1`] = `
+<DocumentFragment>
+  <li
+    class="pf-v6-c-list__item"
+  >
+    <span
+      class="pf-v6-c-list__item-icon"
+    >
+      <div>
+        Icon content
+      </div>
+    </span>
+    <span
+      class="pf-v6-c-list__item-text"
+    >
+      List item content
+    </span>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`Matches snapshot without icon 1`] = `
+<DocumentFragment>
+  <li
+    class=""
+  >
+    <span>
+      List item content
+    </span>
+  </li>
+</DocumentFragment>
+`;