✨ 피드 메인 목록 테스트 코드 작성

src/widgets/feed-main-list/test/FeedMainList.error.test.tsx

@@ -0,0 +1,29 @@
+import { HttpResponse, http } from 'msw';
+import { expect, test } from 'vitest';
+
+import { server } from '@/setupTest';
+import { render, screen } from '@/shared/tests/setup';
+
+import { FeedMainList } from '..';
+
+test('피드 메인 페이지 에러 발생 시, 네트워크 에러 메시지가 화면에 표시된다.', async () => {
+  // given
+  server.use(
+    http.get('/feeds', async () => {
+      return new HttpResponse(null, { status: 524 }); // 타임아웃 에러 반환
+    }),
+  );
+  render(<FeedMainList />);
+
+  const errorTitle = await screen.findByRole('heading', {
+    level: 1,
+    name: '인터넷에 연결되지 않았어요',
+  });
+  const retryButton = await screen.findByRole('button', {
+    name: '재시도하기',
+  });
+
+  // then
+  expect(errorTitle).toBeInTheDocument();
+  expect(retryButton).toBeInTheDocument();
+});

src/widgets/feed-main-list/test/FeedMainList.test.tsx

@@ -0,0 +1,65 @@
+import { HttpResponse, http } from 'msw';
+import { describe, expect, it } from 'vitest';
+
+import { server } from '@/setupTest';
+import { render, screen } from '@/shared/tests/setup';
+
+import { FeedMainList } from '..';
+
+const mockingFeedData = [
+  {
+    id: 1,
+    user: { id: 1, profileImage: '', name: '강병준' },
+    content: 'Feed Content 1',
+    images: [],
+
+    likeCount: 0,
+    commentCount: 0,
+
+    isLiked: false,
+    isBookmark: false,
+
+    createdAt: '2024-04-16 12:00:00',
+    updatedAt: '2024-04-16 12:00:00',
+  },
+];
+
+describe('피드 메인 페이지에서', () => {
+  it('스켈레톤 UI가 화면에 먼저 렌더링된다.', async () => {
+    // given
+    render(<FeedMainList />);
+    const skeletonFeedMainList = document.querySelector(
+      '.skeleton-feed-section',
+    );
+
+    // then
+    expect(skeletonFeedMainList).toBeInTheDocument();
+  });
+
+  it('스켈레톤 UI 이후 콘텐츠가 정상적으로 렌더링된다.', async () => {
+    // given
+    server.use(
+      http.get('/feeds', async () => {
+        return HttpResponse.json(
+          {
+            code: '2000',
+            data: {
+              feeds: mockingFeedData,
+              currentPageNumber: 1,
+              pageSize: 1,
+              numberOfElements: 1,
+              hasNextPage: false,
+            },
+          },
+          { status: 200 },
+        );
+      }),
+    );
+    render(<FeedMainList />);
+
+    const content = await screen.findByText(mockingFeedData[0].content);
+
+    // then
+    expect(content).toBeInTheDocument();
+  });
+});