diff --git a/public/app/core/components/AppChrome/NavLandingPage.test.tsx b/public/app/core/components/AppChrome/NavLandingPage.test.tsx
new file mode 100644
index 00000000000..850a61fe8b2
--- /dev/null
+++ b/public/app/core/components/AppChrome/NavLandingPage.test.tsx
@@ -0,0 +1,103 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { Provider } from 'react-redux';
+
+import { config } from '@grafana/runtime';
+import { configureStore } from 'app/store/configureStore';
+
+import { NavLandingPage } from './NavLandingPage';
+
+describe('NavLandingPage', () => {
+  const mockSectionTitle = 'Section title';
+  const mockId = 'section';
+  const mockSectionUrl = 'mock-section-url';
+  const mockSectionSubtitle = 'Section subtitle';
+  const mockChild1 = {
+    text: 'Child 1',
+    description: 'Child 1 description',
+    id: 'child1',
+    url: 'mock-section-url/child1',
+  };
+  const mockChild2 = {
+    text: 'Child 2',
+    description: 'Child 2 description',
+    id: 'child2',
+    url: 'mock-section-url/child2',
+  };
+  const mockChild3 = {
+    text: 'Child 3',
+    id: 'child3',
+    subTitle: 'Child 3 subtitle',
+    url: 'mock-section-url/child3',
+    hideFromTabs: true,
+    children: [
+      {
+        text: 'Child 3.1',
+        description: 'Child 3.1 description',
+        id: 'child3.1',
+        url: 'mock-section-url/child3/child3.1',
+      },
+    ],
+  };
+
+  const setup = () => {
+    config.bootData.navTree = [
+      {
+        text: mockSectionTitle,
+        id: mockId,
+        url: mockSectionUrl,
+        subTitle: mockSectionSubtitle,
+        children: [mockChild1, mockChild2, mockChild3],
+      },
+    ];
+
+    const store = configureStore();
+    return render(
+      <Provider store={store}>
+        <NavLandingPage navId={mockId} />
+      </Provider>
+    );
+  };
+
+  it('uses the section text as a heading', () => {
+    setup();
+    expect(screen.getByRole('heading', { name: mockSectionTitle })).toBeInTheDocument();
+  });
+
+  it('renders the section subtitle', () => {
+    setup();
+    expect(screen.getByText(mockSectionSubtitle)).toBeInTheDocument();
+  });
+
+  it('renders a link for each direct child', () => {
+    setup();
+    expect(screen.getByRole('link', { name: mockChild1.text })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: mockChild2.text })).toBeInTheDocument();
+  });
+
+  it('renders the description for each direct child', () => {
+    setup();
+    expect(screen.getByText(mockChild1.description)).toBeInTheDocument();
+    expect(screen.getByText(mockChild2.description)).toBeInTheDocument();
+  });
+
+  it('renders the heading for nested sections', () => {
+    setup();
+    expect(screen.getByRole('heading', { name: mockChild3.text })).toBeInTheDocument();
+  });
+
+  it('renders the subTitle for a nested section', () => {
+    setup();
+    expect(screen.getByText(mockChild3.subTitle)).toBeInTheDocument();
+  });
+
+  it('renders a link for a nested child', () => {
+    setup();
+    expect(screen.getByRole('link', { name: mockChild3.children[0].text })).toBeInTheDocument();
+  });
+
+  it('renders the description for a nested child', () => {
+    setup();
+    expect(screen.getByText(mockChild3.children[0].description)).toBeInTheDocument();
+  });
+});
diff --git a/public/app/core/components/AppChrome/NavLandingPageCard.test.tsx b/public/app/core/components/AppChrome/NavLandingPageCard.test.tsx
new file mode 100644
index 00000000000..b15260c7708
--- /dev/null
+++ b/public/app/core/components/AppChrome/NavLandingPageCard.test.tsx
@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { NavLandingPageCard } from './NavLandingPageCard';
+
+describe('NavLandingPageCard', () => {
+  const mockText = 'My heading';
+  const mockUrl = 'http://www.example.com/';
+
+  it('uses the text as a heading', () => {
+    render(<NavLandingPageCard text={mockText} url={mockUrl} />);
+    expect(screen.getByRole('heading', { name: mockText })).toBeInTheDocument();
+  });
+
+  it('labels the link correctly', () => {
+    render(<NavLandingPageCard text={mockText} url={mockUrl} />);
+    const link = screen.getByRole('link', { name: mockText });
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveProperty('href', mockUrl);
+  });
+
+  it('renders the description', () => {
+    const mockDescription = 'My description';
+    render(<NavLandingPageCard text={mockText} url={mockUrl} description={mockDescription} />);
+    expect(screen.getByText(mockDescription)).toBeInTheDocument();
+  });
+});