Small Bug Fixes and Improvements

__tests__/__snapshots__/blog-page.test.tsx.snap

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Blog Page renders blog page unchanged 1`] = `
+<div>
+  <div
+    class="ml-4 mr-4 flex flex-col items-center space-y-10"
+  >
+    <h1
+      class="text-4xl font-semibold text-neutral-800 dark:text-neutral-100"
+    >
+      Blog
+    </h1>
+    <div
+      class="grid grid-cols-2 gap-20 md:grid-cols-3 lg:grid-cols-4"
+    >
+      <div
+        class="space-y-4 text-center"
+      >
+        <a
+          href="blog/posts/blog-welcome"
+        >
+          <img
+            alt="post cover image"
+            class="aspect-video w-full rounded-md object-cover"
+            data-nimg="1"
+            decoding="async"
+            height="100"
+            loading="lazy"
+            src="/hero.svg"
+            style="color: transparent;"
+            width="300"
+          />
+          <h2
+            class="text-lg font-semibold text-neutral-800 dark:text-neutral-100"
+          >
+            Welcome to the Blog!
+          </h2>
+          <p
+            class="text-sm text-neutral-700 dark:text-neutral-200"
+          >
+            Welcome to our new blog page!
+          </p>
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+`;

__tests__/blog-page.test.tsx

@@ -0,0 +1,26 @@
+import { render, screen } from '@testing-library/react';
+
+import Page from '@/app/(main)/blog/page';
+
+describe('Blog Page', () => {
+  it('renders blog page unchanged', () => {
+    const { container } = render(<Page />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('renders a heading', () => {
+    render(<Page />);
+
+    const heading = screen.getByRole('heading', { level: 1 });
+
+    expect(heading).toBeInTheDocument();
+  });
+
+  it('renders blog posts', () => {
+    render(<Page />);
+
+    const posts = screen.getAllByRole('heading', { level: 2 });
+
+    expect(posts.length).toBeGreaterThan(0);
+  });
+});