[15팀 차현빈] [Chapter 1-2] 프레임워크 없이 SPA 만들기 #170

AssertionError: expected '<div id="root"><div class="bg-gray-10…' to contain '404' Expected: "404" Received: "<div id="root"><div class="bg-gray-100 min-h-screen flex justify-center"><div class="max-w-md w-full"><header class="bg-blue-600 text-white p-4 sticky top-0"><h1 class="text-2xl font-bold">항해플러스</h1></header><nav class="bg-white shadow-md p-2 sticky top-14"><ul class="flex justify-around"><li><a href="/" class="text-blue-600 font-bold">홈</a></li><li><a href="/login" class="text-gray-600">로그인</a></li></ul></nav><main class="p-4"><div class="mb-4 bg-white rounded-lg shadow p-4"><textarea id="post-content" placeholder="무슨 생각을 하고 계신가요?" class="w-full p-2 border rounded"></textarea><button id="post-submit" class="mt-2 bg-blue-600 text-white px-4 py-2 rounded">게시</button></div><div id="posts-container" class="space-y-4"><div class="bg-white rounded-lg shadow p-4 mb-4"><div class="flex items-center mb-2"><div><div class="font-bold">홍길동</div><div class="text-gray-500 text-sm">5분 전</div></div></div><p>오늘 날씨가 정말 좋네요. 다들 좋은 하루 보내세요!</p><div class="mt-2 flex justify-between text-gray-500"><span class="like-button cursor-pointer">좋아요 0</span><span>댓글</span><span>공유</span></div></div><div class="bg-white rounded-lg shadow p-4 mb-4"><div class="flex items-center mb-2"><div><div class="font-bold">김철수</div><div class="text-gray-500 text-sm">15분 전</div></div></div><p>새로운 프로젝트를 시작했어요. 열심히 코딩 중입니다!</p><div class="mt-2 flex justify-between text-gray-500"><span class="like-button cursor-pointer">좋아요 0</span><span>댓글</span><span>공유</span></div></div><div class="bg-white rounded-lg shadow p-4 mb-4"><div class="flex items-center mb-2"><div><div class="font-bold">이영희</div><div class="text-gray-500 text-sm">30분 전</div></div></div><p>오늘 점심 메뉴 추천 받습니다. 뭐가 좋을까요?</p><div class="mt-2 flex justify-between text-gray-500"><span class="like-button cursor-pointer">좋아요 0</span><span>댓글</span><span>공유</span></div></div><div class="bg-white rounded-lg shadow p-4 mb-4"><div class="flex items-center mb-2"><div><div class="font-bold">박민수</div><div class="text-gray-500 text-sm">30분 전</div></div></div><p>주말에 등산 가실 분 계신가요? 함께 가요!</p><div class="mt-2 flex justify-between text-gray-500"><span class="like-button cursor-pointer">좋아요 0</span><span>댓글</span><span>공유</span></div></div><div class="bg-white rounded-lg shadow p-4 mb-4"><div class="flex items-center mb-2"><div><div class="font-bold">정수연</div><div class="text-gray-500 text-sm">2시간 전</div></div></div><p>새로 나온 영화 재미있대요. 같이 보러 갈 사람?</p><div class="mt-2 flex justify-between text-gray-500"><span class="like-button cursor-pointer">좋아요 0</span><span>댓글</span><span>공유</span></div></div></div></main><footer class="bg-gray-200 p-4 text-center"><p>© 2024 항해플러스. All rights reserved.</p></footer></div></div></div>" ❯ src/__tests__/chapter1-1/basic.test.js:70:39

src/__tests__/chapter1-1/basic.test.js > 기본과제 테스트 > 2. 사용자 관리 기능 > 로그인 폼에서 사용자 이름을 입력하고 제출하면 로그인 되고, 로그아웃 버튼 클릭시 로그아웃 된다.: src/__tests__/chapter1-1/basic.test.js#L80

TypeError: Cannot read properties of null (reading 'disabled') ❯ Object.type node_modules/@testing-library/user-event/dist/esm/utility/type.js:14:17 ❯ node_modules/@testing-library/user-event/dist/esm/setup/setup.js:83:35 ❯ Object.asyncWrapper node_modules/@testing-library/dom/dist/config.js:23:23 ❯ wrapAsync node_modules/@testing-library/user-event/dist/esm/setup/wrapAsync.js:6:24 ❯ Object.method [as type] node_modules/@testing-library/user-event/dist/esm/setup/setup.js:83:16 ❯ src/__tests__/chapter1-1/basic.test.js:80:18

src/__tests__/chapter1-1/basic.test.js > 기본과제 테스트 > 3. 프로필 페이지 구현 > 로그인한 사용자의 이름과 소개가 표시된다: src/__tests__/chapter1-1/basic.test.js#L103

src/__tests__/chapter1-1/basic.test.js > 기본과제 테스트 > 3. 프로필 페이지 구현 > 로그인한 사용자의 이름과 소개가 표시된다: src/__tests__/chapter1-1/basic.test.js#L113

TypeError: Cannot read properties of null (reading 'click') ❯ src/__tests__/chapter1-1/basic.test.js:113:40

src/__tests__/chapter1-1/basic.test.js > 기본과제 테스트 > 3. 프로필 페이지 구현 > 프로필 수정 기능이 동작한다: src/__tests__/chapter1-1/basic.test.js#L103

src/__tests__/chapter1-1/basic.test.js > 기본과제 테스트 > 3. 프로필 페이지 구현 > 프로필 수정 기능이 동작한다: src/__tests__/chapter1-1/basic.test.js#L113

TypeError: Cannot read properties of null (reading 'click') ❯ src/__tests__/chapter1-1/basic.test.js:113:40

src/__tests__/chapter1-1/basic.test.js > 기본과제 테스트 > 4. 컴포넌트 기반 구조 설계 > Header, Footer 컴포넌트가 메인 페이지와 프로필 페이지에 존재하고, 로그인페이지와 에러페이지에는 존재하지 않는다.: src/__tests__/chapter1-1/basic.test.js#L143

src/__tests__/chapter1-1/basic.test.js > 기본과제 테스트 > 5. 상태 관리 구현 > 로그인 상태에 따라 UI가 변경된다: src/__tests__/chapter1-1/basic.test.js#L189

Unhandled error: src/components/templates/Navigation.jsx#L15

TypeError: Cannot read properties of undefined (reading 'replace') ❯ HTMLDivElement.handleClick src/components/templates/Navigation.jsx:15:37 ❯ HTMLDivElement.callTheUserObjectsOperation node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30 ❯ innerInvokeEventListeners node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:350:25 ❯ invokeEventListeners node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3 ❯ HTMLSpanElementImpl._dispatch node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9 ❯ fireAnEvent node_modules/jsdom/lib/jsdom/living/helpers/events.js:18:36 ❯ HTMLSpanElementImpl.click node_modules/jsdom/lib/jsdom/living/nodes/HTMLElement-impl.js:85:5 ❯ HTMLSpanElement.click node_modules/jsdom/lib/jsdom/living/generated/HTMLElement.js:108:34 ❯ src/__tests__/chapter1-2/advanced.post.test.jsx:50:19 ❯ node_modules/@vitest/runner/dist/index.js:146:14 This error originated in "src/__tests__/chapter1-2/advanced.post.test.jsx" test file. It doesn't mean the error was thrown inside the file itself, but while it was running. The latest test that might've caused the error is "포스트에 좋아요를 클릭할 경우, 경고 메세지가 발생한다.". It might mean one of the following: - The error was thrown, while Vitest was running this test. - If the error occurred after the test had been completed, this was the last documented test before it was thrown.

Unhandled error: src/components/templates/Navigation.jsx#L15

src/__tests__/chapter1-1/advanced.hashRouter.test.js > 심화과제 > 해시 라우터 테스트 > 1. 라우팅 구현 > "/login" 경로로 접근하면 로그인 페이지가 렌더링된다: src/__tests__/chapter1-1/advanced.hashRouter.test.js#L35

AssertionError: expected 1 to be +0 // Object.is equality - Expected + Received - 0 + 1 ❯ src/__tests__/chapter1-1/advanced.hashRouter.test.js:35:63

src/__tests__/chapter1-1/advanced.hashRouter.test.js > 심화과제 > 해시 라우터 테스트 > 1. 라우팅 구현 > 로그인이 되지 않은 상태에서 "/profile" 경로로 접근하면, 로그인 페이지로 리다이렉션 된다.: src/__tests__/chapter1-1/advanced.hashRouter.test.js#L47

AssertionError: expected 1 to be +0 // Object.is equality - Expected + Received - 0 + 1 ❯ src/__tests__/chapter1-1/advanced.hashRouter.test.js:47:63

src/__tests__/chapter1-1/advanced.hashRouter.test.js > 심화과제 > 해시 라우터 테스트 > 1. 라우팅 구현 > 존재하지 않는 경로로 접근하면 404 페이지가 렌더링된다: src/__tests__/chapter1-1/advanced.hashRouter.test.js#L54

src/__tests__/chapter1-1/advanced.test.js > 심화과제 테스트 > 2. 라우트 가드 구현 > 로그인된 사용자가 로그인 페이지에 접근시 메인 페이지로 리다이렉트 한다.: src/__tests__/chapter1-1/advanced.test.js#L54

src/__tests__/chapter1-2/advanced.post.test.jsx > Chapter1-2 > 심화과제 > 포스트 관리 > 비사용자 > > 포스트 작성 폼이 보이지 않는다: src/__tests__/chapter1-2/advanced.post.test.jsx#L42

AssertionError: expected <textarea …(3)></textarea> to be null - Expected: null + Received: <textarea class="w-full p-2 border rounded" id="post-content" placeholder="무슨 생각을 하고 계신가요?" /> ❯ src/__tests__/chapter1-2/advanced.post.test.jsx:42:55

src/__tests__/chapter1-2/advanced.post.test.jsx > Chapter1-2 > 심화과제 > 포스트 관리 > 비사용자 > > 포스트에 좋아요를 클릭할 경우, 경고 메세지가 발생한다.: src/__tests__/chapter1-2/advanced.post.test.jsx#L51

AssertionError: expected "spy" to be called with arguments: [ '로그인 후 이용해주세요' ] Received: Number of calls: 0 ❯ src/__tests__/chapter1-2/advanced.post.test.jsx:51:28

src/__tests__/chapter1-2/advanced.post.test.jsx > Chapter1-2 > 심화과제 > 포스트 관리 > 사용자 > > 포스트 작성 폼이 보인다.: src/__tests__/chapter1-2/advanced.post.test.jsx#L60