diff --git a/examples/grid_example/jest.config.js b/examples/grid_example/jest.config.js
new file mode 100644
index 0000000000000..7af17c535fd51
--- /dev/null
+++ b/examples/grid_example/jest.config.js
@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../..',
+  roots: ['<rootDir>/examples/grid_example'],
+  coverageDirectory: '<rootDir>/target/kibana-coverage/jest/examples/grid_example',
+  coverageReporters: ['text', 'html'],
+  collectCoverageFrom: ['<rootDir>/examples/grid_example/{common,public,server}/**/*.{ts,tsx}'],
+  setupFiles: ['jest-canvas-mock'],
+};
diff --git a/examples/grid_example/public/app.test.tsx b/examples/grid_example/public/app.test.tsx
new file mode 100644
index 0000000000000..ef0de834ca3f8
--- /dev/null
+++ b/examples/grid_example/public/app.test.tsx
@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { GridExample } from './app';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { CoreStart } from '@kbn/core-lifecycle-browser';
+import { initialGridLayout } from './serialized_grid_layout';
+
+describe('GridExample', () => {
+  let coreStart: CoreStart;
+
+  beforeEach(() => {
+    coreStart = {} as CoreStart;
+  });
+
+  it('renders all the panels', () => {
+    render(<GridExample coreStart={coreStart} />);
+    const panelTitles = screen
+      .getAllByTestId('gridExamplePanelTitle')
+      .map((panel) => panel.textContent);
+    const expectedPanelTitles = initialGridLayout.flatMap(({ panels }) => Object.keys(panels));
+    expect(panelTitles).toEqual(expectedPanelTitles);
+  });
+});
diff --git a/examples/grid_example/public/app.tsx b/examples/grid_example/public/app.tsx
index 183ffd2f3dc46..1ad803e03b082 100644
--- a/examples/grid_example/public/app.tsx
+++ b/examples/grid_example/public/app.tsx
@@ -85,6 +85,7 @@ export const GridExample = ({ coreStart }: { coreStart: CoreStart }) => {
             <EuiFlexItem grow={false}>
               <EuiButton
                 onClick={async () => {
+                  setExpandedPanelId(undefined);
                   const panelId = await getPanelId({
                     coreStart,
                     suggestion: `panel${(gridLayoutApi?.getPanelCount() ?? 0) + 1}`,
@@ -156,10 +157,13 @@ export const GridExample = ({ coreStart }: { coreStart: CoreStart }) => {
             renderPanelContents={(id) => {
               return (
                 <>
-                  <div style={{ padding: 8 }}>{id}</div>
+                  <div style={{ padding: 8 }} data-test-subj="gridExamplePanelTitle">
+                    {id}
+                  </div>
                   <EuiButtonEmpty
                     onClick={() => {
                       gridLayoutApi?.removePanel(id);
+                      setExpandedPanelId(undefined);
                     }}
                   >
                     {i18n.translate('examples.gridExample.deletePanelButton', {
@@ -173,6 +177,7 @@ export const GridExample = ({ coreStart }: { coreStart: CoreStart }) => {
                         suggestion: `panel${(gridLayoutApi?.getPanelCount() ?? 0) + 1}`,
                       });
                       if (newPanelId) gridLayoutApi?.replacePanel(id, newPanelId);
+                      setExpandedPanelId(undefined);
                     }}
                   >
                     {i18n.translate('examples.gridExample.replacePanelButton', {
@@ -185,7 +190,8 @@ export const GridExample = ({ coreStart }: { coreStart: CoreStart }) => {
                       setExpandedPanelId((expandedId) => (expandedId ? undefined : id))
                     }
                     aria-label={i18n.translate('examples.gridExample.maximizePanel', {
-                      defaultMessage: 'Maximize/minimize panel',
+                      defaultMessage: 'Maximize/minimize panel {id}',
+                      values: { id },
                     })}
                   />
                 </>
diff --git a/examples/grid_example/public/serialized_grid_layout.ts b/examples/grid_example/public/serialized_grid_layout.ts
index 2bb20052398f8..a431e8120b28f 100644
--- a/examples/grid_example/public/serialized_grid_layout.ts
+++ b/examples/grid_example/public/serialized_grid_layout.ts
@@ -24,7 +24,7 @@ export function setSerializedGridLayout(layout: GridLayoutData) {
   sessionStorage.setItem(STATE_SESSION_STORAGE_KEY, JSON.stringify(layout));
 }
 
-const initialGridLayout: GridLayoutData = [
+export const initialGridLayout: GridLayoutData = [
   {
     title: 'Large section',
     isCollapsed: false,