diff --git a/web/src/components/__tests__/ActivityIndicator.test.jsx b/web/src/components/__tests__/ActivityIndicator.test.jsx
new file mode 100644
index 000000000..582be24af
--- /dev/null
+++ b/web/src/components/__tests__/ActivityIndicator.test.jsx
@@ -0,0 +1,47 @@
+import { h } from 'preact';
+import ActivityIndicator from '../ActivityIndicator';
+import { render, screen } from '@testing-library/preact';
+
+describe('ActivityIndicator', () => {
+  test('renders an ActivityIndicator with default size md', async () => {
+    render(<ActivityIndicator />);
+    expect(screen.getByLabelText('Loading…')).toMatchInlineSnapshot(`
+      <div
+        aria-label="Loading…"
+        class="w-full flex items-center justify-center"
+      >
+        <div
+          class="activityindicator ease-in rounded-full border-gray-200 text-blue-500 h-8 w-8 border-4 border-t-4"
+        />
+      </div>
+    `);
+  });
+
+  test('renders an ActivityIndicator with size sm', async () => {
+    render(<ActivityIndicator size="sm" />);
+    expect(screen.getByLabelText('Loading…')).toMatchInlineSnapshot(`
+      <div
+        aria-label="Loading…"
+        class="w-full flex items-center justify-center"
+      >
+        <div
+          class="activityindicator ease-in rounded-full border-gray-200 text-blue-500 h-4 w-4 border-2 border-t-2"
+        />
+      </div>
+    `);
+  });
+
+  test('renders an ActivityIndicator with size lg', async () => {
+    render(<ActivityIndicator size="lg" />);
+    expect(screen.getByLabelText('Loading…')).toMatchInlineSnapshot(`
+      <div
+        aria-label="Loading…"
+        class="w-full flex items-center justify-center"
+      >
+        <div
+          class="activityindicator ease-in rounded-full border-gray-200 text-blue-500 h-16 w-16 border-8 border-t-8"
+        />
+      </div>
+    `);
+  });
+});