Jest로 테스트할 때 이 헤더는 데이터 라우터에서 useLoaderData를 사용할 때만 나타납니다.

Question

React Router v6.14.2를 사용하여 브라우저 라우팅 설정을 위한 모든 단계를 완료했습니다

index.jsx

으아악

그런 다음 React 구성 요소에서 데이터 로더를 사용하려는 경우 코드는 다음과 같습니다

profileList.jsx

으아악

이는 앱을 로컬에서 실행하고 사용자가 콘솔이나 다른 곳에서 문제 없이 로드할 때 완벽하게 작동합니다.

그런데 Jest 테스트를 실행하려고 하면 다음과 같은 오류 메시지가 나타납니다. useLoaderData必须在数据路由器中使用 다음 코드 줄을 가리킵니다. const users = useLoaderData();

현재 테스트는 매우 간단하지만 여전히 테스트 실패의 원인이 됩니다.

profile.test.js

으아악

React Router에 대한 문서를 보고 단계를 정확하게 따라해 보았습니다. Stack Overflow를 검색했지만 내 질문과 정확히 일치하는 항목을 찾지 못했습니다.

Answer 1

단위 테스트에서도 데이터 API에 액세스하는 구성 요소는 여전히 데이터 라우터 내에서 렌더링되어야 합니다. 단위 테스트에서는 Node가 DOM 환경이 아니기 때문에 MemoryRouter（例如：createMemoryRouter)을 사용하는 것이 좋습니다.

예:

으아악