diff --git a/app/react/components/PageHeader/Breadcrumbs/Breadcrumbs.test.tsx b/app/react/components/PageHeader/Breadcrumbs/Breadcrumbs.test.tsx
index 97e3c0c763..bc97fdb462 100644
--- a/app/react/components/PageHeader/Breadcrumbs/Breadcrumbs.test.tsx
+++ b/app/react/components/PageHeader/Breadcrumbs/Breadcrumbs.test.tsx
@@ -1,16 +1,56 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+
+import { withTestRouter } from '@/react/test-utils/withRouter';
import { Breadcrumbs } from './Breadcrumbs';
-test('should display a Breadcrumbs, breadcrumbs should be separated by >', async () => {
- const breadcrumbs = [
- { label: 'bread1' },
- { label: 'bread2' },
- { label: 'bread3' },
- ];
- const { container } = render();
+function renderBreadcrumbs(
+ breadcrumbs: React.ComponentProps['breadcrumbs']
+) {
+ const Wrapped = withTestRouter(() => (
+
+ ));
+ return render();
+}
- expect(container.firstChild?.textContent).toEqual(
- breadcrumbs.map((b) => b.label).join('>')
- );
+describe('Breadcrumbs', () => {
+ it('should render a home link', () => {
+ renderBreadcrumbs([{ label: 'Settings' }]);
+
+ expect(screen.getByTestId('breadcrumb-home')).toBeInTheDocument();
+ });
+
+ it('should render each breadcrumb label', () => {
+ renderBreadcrumbs([
+ { label: 'Settings' },
+ { label: 'Environment Groups' },
+ { label: 'Production' },
+ ]);
+
+ expect(screen.getByText('Settings')).toBeVisible();
+ expect(screen.getByText('Environment Groups')).toBeVisible();
+ expect(screen.getByText('Production')).toBeVisible();
+ });
+
+ it('should render string breadcrumbs', () => {
+ renderBreadcrumbs(['Settings', 'Tags']);
+
+ expect(screen.getByText('Settings')).toBeVisible();
+ expect(screen.getByText('Tags')).toBeVisible();
+ });
+
+ it('should render a single string breadcrumb', () => {
+ renderBreadcrumbs('Environments');
+
+ expect(screen.getByText('Environments')).toBeVisible();
+ });
+
+ it('should render linked breadcrumbs with data-cy', () => {
+ renderBreadcrumbs([
+ { label: 'Settings', link: 'portainer.settings' },
+ { label: 'Groups' },
+ ]);
+
+ expect(screen.getByTestId('breadcrumb-Settings')).toBeInTheDocument();
+ });
});