diff --git a/src/shared/ui/Footnote/Footnote.svelte.test.ts b/src/shared/ui/Footnote/Footnote.svelte.test.ts
new file mode 100644
index 0000000..cf2270a
--- /dev/null
+++ b/src/shared/ui/Footnote/Footnote.svelte.test.ts
@@ -0,0 +1,33 @@
+import {
+    render,
+    screen,
+} from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import Footnote from './Footnote.svelte';
+
+function textSnippet(text: string) {
+    return createRawSnippet(() => ({ render: () => `<span>${text}</span>` }));
+}
+
+describe('Footnote', () => {
+    it('renders children content in a span', () => {
+        render(Footnote, { children: textSnippet('* measured at 20°C') });
+        expect(screen.getByText('* measured at 20°C')).toBeInTheDocument();
+    });
+
+    it('renders nothing when no children or render', () => {
+        const { container } = render(Footnote);
+        expect(container.firstElementChild).toBeNull();
+    });
+
+    it('passes class to the render snippet', () => {
+        const renderSnippet = createRawSnippet<[{ class: string }]>(getParams => ({
+            render: () => {
+                const cls = getParams().class;
+                return `<span class="${cls}">note</span>`;
+            },
+        }));
+        const { container } = render(Footnote, { render: renderSnippet });
+        expect(container.querySelector('span')?.className).toContain('font-mono');
+    });
+});