diff --git a/packages/react-core/src/components/Panel/__tests__/Panel.test.tsx b/packages/react-core/src/components/Panel/__tests__/Panel.test.tsx
index eb15a5a5d38..bff87c322de 100644
--- a/packages/react-core/src/components/Panel/__tests__/Panel.test.tsx
+++ b/packages/react-core/src/components/Panel/__tests__/Panel.test.tsx
@@ -1,62 +1,100 @@
-import React from 'react';
-import { render } from '@testing-library/react';
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
 import { Panel } from '../Panel';
 import { PanelMain } from '../PanelMain';
 import { PanelMainBody } from '../PanelMainBody';
-import { PanelHeader } from '../PanelHeader';
-import { PanelFooter } from '../PanelFooter';
-
-describe('Panel', () => {
-  test('renders content', () => {
-    const { asFragment } = render(<Panel>Foo</Panel>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('renders content with raised styling', () => {
-    const { asFragment } = render(<Panel variant="raised">Foo</Panel>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('renders content with bordered styling', () => {
-    const { asFragment } = render(<Panel variant="bordered">Foo</Panel>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('renders content with scrollable styling', () => {
-    const { asFragment } = render(<Panel isScrollable>Foo</Panel>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-});
-
-describe('PanelMain', () => {
-  test('renders content', () => {
-    const { asFragment } = render(<PanelMain>Foo</PanelMain>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('renders content with the set maximum height', () => {
-    const { asFragment } = render(<PanelMain maxHeight={'80px'}>Foo</PanelMain>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-});
-
-describe('PanelMainBody', () => {
-  test('renders content', () => {
-    const { asFragment } = render(<PanelMainBody>Foo</PanelMainBody>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-});
-
-describe('PanelHeader', () => {
-  test('renders content', () => {
-    const { asFragment } = render(<PanelHeader>Foo</PanelHeader>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-});
-
-describe('PanelFooter', () => {
-  test('renders content', () => {
-    const { asFragment } = render(<PanelFooter>Foo</PanelFooter>);
-    expect(asFragment()).toMatchSnapshot();
-  });
+import userEvent from '@testing-library/user-event';
+import { useEffect } from 'react';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="panel">
+      <Panel />
+    </div>
+  );
+  expect(screen.getByTestId('panel').firstChild).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<Panel>Test</Panel>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with the pf-c-panel', () => {
+  render(<Panel>Test</Panel>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-panel');
+});
+
+test('Renders with only the class pf-c-panel by default', () => {
+  render(<Panel>Test</Panel>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-panel', { exact: true });
+});
+
+test('Renders with custom class name when className prop is passed', () => {
+  render(<Panel className="test-class">Test</Panel>);
+  expect(screen.getByText('Test')).toHaveClass('test-class');
+});
+
+test('Renders with class name pf-m-raised when variant is raised', () => {
+  render(<Panel variant="raised">Test</Panel>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-raised');
+});
+
+test('Renders with class name pf-m-bordered when variant is bordered', () => {
+  render(<Panel variant="bordered">Test</Panel>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-bordered');
+});
+
+test('Renders with class name pf-m-scrollable when scrollable is true', () => {
+  render(<Panel isScrollable>Test</Panel>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-scrollable');
+});
+
+test('Renders with ref', async () => {
+  const user = userEvent.setup();
+  const panelRef: React.RefObject<HTMLDivElement> = React.createRef();
+
+  const BasicPanel = () => {
+    const [lastClickWasInPanel, setLastClickWasInPanel] = React.useState(false);
+
+    const handleClick = event => {
+      if (panelRef.current && panelRef.current.contains(event.target)) {
+        setLastClickWasInPanel(true);
+      } else {
+        setLastClickWasInPanel(false);
+      }
+    };
+
+    useEffect(() => {
+      document.addEventListener('click', handleClick);
+    }, []);
+
+    return (
+      <div>
+        <Panel ref={panelRef}>
+          <PanelMain>
+            <PanelMainBody>Main content</PanelMainBody>
+          </PanelMain>
+        </Panel>
+        <p>Last click was in panel: {lastClickWasInPanel ? 'true' : 'false'}</p>
+      </div>
+    );
+  };
+
+  render(<BasicPanel />);
+
+  await user.click(document.body);
+  expect(screen.getByText('Last click was in panel: false')).toBeVisible;
+  await user.click(screen.getByText('Main content'));
+  expect(screen.getByText('Last click was in panel: true')).toBeVisible;
+});
+
+test('Renders with the inherited element props spread to the component', () => {
+  render(<Panel aria-label="this is a simple panel">Test</Panel>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('this is a simple panel');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<Panel>Test</Panel>);
+  expect(asFragment()).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/Panel/__tests__/PanelFooter.test.tsx b/packages/react-core/src/components/Panel/__tests__/PanelFooter.test.tsx
new file mode 100644
index 00000000000..3af13048864
--- /dev/null
+++ b/packages/react-core/src/components/Panel/__tests__/PanelFooter.test.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { PanelFooter } from '../PanelFooter';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="panelFooter">
+      <PanelFooter />
+    </div>
+  );
+  expect(screen.getByTestId('panelFooter').firstChild).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<PanelFooter>Test</PanelFooter>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with the pf-c-panel__footer', () => {
+  render(<PanelFooter>Test</PanelFooter>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-panel__footer');
+});
+
+test('Renders with only the class pf-c-panel__footer by default', () => {
+  render(<PanelFooter>Test</PanelFooter>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-panel__footer', { exact: true });
+});
+
+test('Renders with custom class name when className prop is passed', () => {
+  render(<PanelFooter className="test-class">Test</PanelFooter>);
+  expect(screen.getByText('Test')).toHaveClass('test-class');
+});
+
+test('Renders with the inherited element props spread to the component', () => {
+  render(<PanelFooter aria-label="this is a simple panel footer">Test</PanelFooter>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('this is a simple panel footer');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<PanelFooter>Test</PanelFooter>);
+  expect(asFragment()).toMatchSnapshot();
+});
diff --git a/packages/react-core/src/components/Panel/__tests__/PanelHeader.test.tsx b/packages/react-core/src/components/Panel/__tests__/PanelHeader.test.tsx
new file mode 100644
index 00000000000..d75fa279ce5
--- /dev/null
+++ b/packages/react-core/src/components/Panel/__tests__/PanelHeader.test.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { PanelHeader } from '../PanelHeader';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="panelHeader">
+      <PanelHeader />
+    </div>
+  );
+  expect(screen.getByTestId('panelHeader').firstChild).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<PanelHeader>Test</PanelHeader>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with the pf-c-panel__header', () => {
+  render(<PanelHeader>Test</PanelHeader>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-panel__header');
+});
+
+test('Renders with only the class pf-c-panel__header by default', () => {
+  render(<PanelHeader>Test</PanelHeader>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-panel__header', { exact: true });
+});
+
+test('Renders with custom class name when className prop is passed', () => {
+  render(<PanelHeader className="test-class">Test</PanelHeader>);
+  expect(screen.getByText('Test')).toHaveClass('test-class');
+});
+
+test('Renders with the inherited element props spread to the component', () => {
+  render(<PanelHeader aria-label="this is a simple panel header">Test</PanelHeader>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('this is a simple panel header');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<PanelHeader>Test</PanelHeader>);
+  expect(asFragment()).toMatchSnapshot();
+});
diff --git a/packages/react-core/src/components/Panel/__tests__/PanelMain.test.tsx b/packages/react-core/src/components/Panel/__tests__/PanelMain.test.tsx
new file mode 100644
index 00000000000..cbc659a5f92
--- /dev/null
+++ b/packages/react-core/src/components/Panel/__tests__/PanelMain.test.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { PanelMain } from '../PanelMain';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="panelMain">
+      <PanelMain />
+    </div>
+  );
+  expect(screen.getByTestId('panelMain').firstChild).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<PanelMain>Test</PanelMain>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with the pf-c-panel__main', () => {
+  render(<PanelMain>Test</PanelMain>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-panel__main');
+});
+
+test('Renders with only the class pf-c-panel__main by default', () => {
+  render(<PanelMain>Test</PanelMain>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-panel__main', { exact: true });
+});
+
+test('Renders with custom class name when className prop is passed', () => {
+  render(<PanelMain className="test-class">Test</PanelMain>);
+  expect(screen.getByText('Test')).toHaveClass('test-class');
+});
+
+test('Renders with custom max height name when maxHeight prop is passed', () => {
+  render(<PanelMain maxHeight="100px">Test</PanelMain>);
+  const styles = getComputedStyle(screen.getByText('Test'));
+  expect(styles.getPropertyValue('--pf-c-panel__main--MaxHeight')).toBe('100px');
+});
+
+test('Renders with the inherited element props spread to the component', () => {
+  render(<PanelMain aria-label="this is a simple panel main">Test</PanelMain>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('this is a simple panel main');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<PanelMain>Test</PanelMain>);
+  expect(asFragment()).toMatchSnapshot();
+});
diff --git a/packages/react-core/src/components/Panel/__tests__/PanelMainBody.test.tsx b/packages/react-core/src/components/Panel/__tests__/PanelMainBody.test.tsx
new file mode 100644
index 00000000000..14d151dc9e8
--- /dev/null
+++ b/packages/react-core/src/components/Panel/__tests__/PanelMainBody.test.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { PanelMainBody } from '../PanelMainBody';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="panelMainBody">
+      <PanelMainBody />
+    </div>
+  );
+  expect(screen.getByTestId('panelMainBody').firstChild).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<PanelMainBody>Test</PanelMainBody>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with the pf-c-panel__main-body', () => {
+  render(<PanelMainBody>Test</PanelMainBody>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-panel__main-body');
+});
+
+test('Renders with only the class pf-c-panel__main-body by default', () => {
+  render(<PanelMainBody>Test</PanelMainBody>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-panel__main-body', { exact: true });
+});
+
+test('Renders with custom class name when className prop is passed', () => {
+  render(<PanelMainBody className="test-class">Test</PanelMainBody>);
+  expect(screen.getByText('Test')).toHaveClass('test-class');
+});
+
+test('Renders with the inherited element props spread to the component', () => {
+  render(<PanelMainBody aria-label="this is a simple panel main body">Test</PanelMainBody>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('this is a simple panel main body');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<PanelMainBody>Test</PanelMainBody>);
+  expect(asFragment()).toMatchSnapshot();
+});
diff --git a/packages/react-core/src/components/Panel/__tests__/__snapshots__/Panel.test.tsx.snap b/packages/react-core/src/components/Panel/__tests__/__snapshots__/Panel.test.tsx.snap
index 8e1eae116da..8898a702e5e 100644
--- a/packages/react-core/src/components/Panel/__tests__/__snapshots__/Panel.test.tsx.snap
+++ b/packages/react-core/src/components/Panel/__tests__/__snapshots__/Panel.test.tsx.snap
@@ -1,92 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Panel renders content 1`] = `
+exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-panel"
   >
-    Foo
+    Test
   </div>
 </DocumentFragment>
 `;
 
-exports[`Panel renders content with bordered styling 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-panel pf-m-bordered"
-  >
-    Foo
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Panel renders content with raised styling 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-panel pf-m-raised"
-  >
-    Foo
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Panel renders content with scrollable styling 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-panel pf-m-scrollable"
-  >
-    Foo
-  </div>
-</DocumentFragment>
-`;
-
-exports[`PanelFooter renders content 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-panel__footer"
-  >
-    Foo
-  </div>
-</DocumentFragment>
-`;
-
-exports[`PanelHeader renders content 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-panel__header"
-  >
-    Foo
-  </div>
-</DocumentFragment>
-`;
-
-exports[`PanelMain renders content 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-panel__main"
-  >
-    Foo
-  </div>
-</DocumentFragment>
-`;
-
-exports[`PanelMain renders content with the set maximum height 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-panel__main"
-    style="--pf-c-panel__main--MaxHeight: 80px;"
-  >
-    Foo
-  </div>
-</DocumentFragment>
-`;
-
-exports[`PanelMainBody renders content 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-c-panel__main-body"
-  >
-    Foo
-  </div>
-</DocumentFragment>
-`;
diff --git a/packages/react-core/src/components/Panel/__tests__/__snapshots__/PanelFooter.test.tsx.snap b/packages/react-core/src/components/Panel/__tests__/__snapshots__/PanelFooter.test.tsx.snap
new file mode 100644
index 00000000000..1d0c965cea9
--- /dev/null
+++ b/packages/react-core/src/components/Panel/__tests__/__snapshots__/PanelFooter.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-panel__footer"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/react-core/src/components/Panel/__tests__/__snapshots__/PanelHeader.test.tsx.snap b/packages/react-core/src/components/Panel/__tests__/__snapshots__/PanelHeader.test.tsx.snap
new file mode 100644
index 00000000000..ae415425cff
--- /dev/null
+++ b/packages/react-core/src/components/Panel/__tests__/__snapshots__/PanelHeader.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-panel__header"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/react-core/src/components/Panel/__tests__/__snapshots__/PanelMain.test.tsx.snap b/packages/react-core/src/components/Panel/__tests__/__snapshots__/PanelMain.test.tsx.snap
new file mode 100644
index 00000000000..ece5ab78492
--- /dev/null
+++ b/packages/react-core/src/components/Panel/__tests__/__snapshots__/PanelMain.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-panel__main"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;
diff --git a/packages/react-core/src/components/Panel/__tests__/__snapshots__/PanelMainBody.test.tsx.snap b/packages/react-core/src/components/Panel/__tests__/__snapshots__/PanelMainBody.test.tsx.snap
new file mode 100644
index 00000000000..db02f6c38bd
--- /dev/null
+++ b/packages/react-core/src/components/Panel/__tests__/__snapshots__/PanelMainBody.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-panel__main-body"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;