Jest를 사용하여 React BooksContainer 단위 테스트에 GetBooksAction 모의를 추가하는 방법은 무엇입니까?

Question

저는 React와 Jest를 처음 접했고 지금까지 거의 모든 것에 어려움을 겪고 있습니다. 제가 찾은 튜토리얼을 따라 하려고 합니다.

간단한 서점 React 프론트엔드 애플리케이션입니다. 지금까지는 간단한 레이아웃 구성 요소를 만든 다음 가져온 책 목록이 포함된 BookContainer 구성 요소 내에 BookList 구성 요소를 만들었습니다. 그런 다음 각 책에는 BookListItem 구성 요소가 있습니다.

그런 다음 백엔드의 Rest Api에서 책을 가져오기 위한 간단한 BookService 및 getAllBooks가 있습니다. 또한 Redux 스토어에서 저장 및 가져오기를 모두 처리하는 간단한 BookReducer, BookSelector 및 BookAction이 있습니다.

저는 redux, React-hooks, redux 툴킷, jest 및 javascript를 사용하고 있습니다.

웹 브라우저에서 실행하면 모든 것이 잘 작동하고 책을 가져와서 스토어에 저장한 다음 BookContainer 구성 요소에서 렌더링합니다.

이제 이 BookContainer 구성 요소에 대한 간단한 단위 테스트를 추가하려고 하며 도움을 찾고 있습니다.

이 단위 테스트를 통해 BookList 구성 요소가 렌더링되었는지(haveBeenCalledWith), 즉 렌더링 메서드에 전달한 책 목록을 확인하고 싶습니다.

또한 렌더링하기 위해 전달한 책 목록을 반환하는 BookAction을 모의하고 싶습니다. 제가 지금 고민하고 있는 것이 바로 이것입니다.

이것은 내 BookContainer 구성 요소입니다.

으아아아

내 BookList 구성요소는 다음과 같습니다.

으아아아

이것은 내 BookAction입니다:

으아아아

이것은 내 BookContainer.test.jsx입니다.

으아아아

이것은 제가 테스트에 사용하는 bookContainerStateWithData의 TestDataProvider입니다.

으아아아

이것은 제가 테스트에 사용하는 TestSetupProvider의 renderWithRedux() 도우미 메서드입니다.

으아아아

이것은 TestSetupProvider에서 사용되는 createSoteWithMiddleware()를 제공하는 ReduxStoreHelper입니다:

으아아아

현재 받고 있는 오류 메시지는 다음과 같습니다.

으아아아

BookContainer 단위 테스트의 다음 줄:

으아아아

어떤 도움이나 조언도 감사드립니다. 비슷한 문제와 해결책을 찾고 있었지만 지금까지는 성공하지 못했습니다.

편집 1

getBooksAction의 농담에 다음과 같이 __esModule: true를 추가하면:

으아아아

그러면 오류 메시지가 달라집니다:

으아아아

편집 2

다음과 같이 농담 시뮬레이션에서 getBooksAction 키를 기본값으로 변경하면:

으아아아

그러면 더 이상 유형 오류가 없지만 어설션 오류가 발생합니다(조금 더 가깝습니다):

으아아아

이제 빈 책 배열이 반환됩니다. 그렇다면 주어진 책 배열을 전달하기 위해 시뮬레이션을 어떻게 변경할 수 있습니까?

편집 3

문제의 근본 원인을 찾은 것 같습니다. BookContainer가 생성되고 렌더링되면 책은 연속해서 여러 번 가져옵니다. 처음 두 개는 빈 책 배열을 반환합니다. 세 번째부터 획득한 books 배열을 반환합니다. useEffect 이후 BookContainer에 콘솔 로그를 추가하여 이를 알 수 있습니다.

으아악

연속해서 여러번 호출해야 하나요? 책 배열을 올바르게 가져오려면 단 한 번의 호출만으로 충분하지 않습니까? 이 동작의 원인은 무엇입니까? 내 코드의 다른 곳에 문제가 있습니까?

그런데 이것이 BookContainer 구성 요소에 짜증나는 IF 문이 있는 이유이기도 합니다. 튜토리얼에는 없지만 모든 것이 예상대로 작동합니다. BookContainer가 렌더링될 때마다 요청/작업이 두 배로 늘어나는 것 같습니다...

편집 4

인덱스 파일에는 StrictMode를 사용했습니다. 이를 제거한 후 이중 요청이 사라지고 BookContainer의 useEffect()가 이제 한 번만 실행됩니다. 그러나 BookContainer의 render 메소드는 여전히 두 번 실행됩니다. 첫 번째는 빈 책 배열을 사용하고 두 번째는 가져온 책 배열을 사용합니다.

Answer 1

궁극적인 근본 원인은 백엔드와 프런트엔드 간의 응답 데이터가 잘못 매핑되었기 때문입니다.

책 가져오기 엔드포인트에 대한 내 API 응답은 다음과 같습니다.

으아악

그래서 기본적으로는 json 배열이 아니라 내부에 배열이 있는 json 객체입니다. 좋은 API 응답 관행에서 알 수 있듯이 더 유연해져야 합니다.

그러나 내 프런트엔드에서 내가 작성한 코드는 기본적으로 API 응답이 BookList의 json 배열이라고 잘못 가정합니다.

으아악

다음으로 변경:

으아악

그런 다음 BookList 구성 요소에서 이 변경 사항을 추가로 적용하세요.

으아악

마지막으로 단위 테스트에서도:

으아악

그리고 getBooksAction 모의에는 기본값이나 __esModule이 필요하지 않습니다.

으아악

모든 것이 예상대로 작동합니다. :)