apollo client mutation test에 관해서 질문드려용. UI 플로우 유저가 여러 개의 input value를 수정합니다. 유저가 생성 버튼을 클릭하면 create mutation이 api 서버로 요청됩니다. 문제 상황 @apollo/react-testing 라이브러리의 MockedProvider를 사용하여 테스팅 중입니다. 이 때, 아래와 같이 테스트를 하는데,

No more mocked responses for the query: mutation createProxyTag($input: ProxyTagCreateInput!) {
  createProxyTag(input: $input) {
    ...proxyTagBaseFields
  }
}

fragment proxyTagBaseFields on ProxyTag {
  __typename
  id
  type
  koName
  translations {
    __typename
    id
    language
    name
  }
}
, variables: {"input":{"type":"BRAND","koName":"","translations":[]}}

다음과 같은 문제가 발생하고 있습니다. 몇 시간째 이슈도 찾아보고 하는데 해결이 안돼서 도움 요청드려요.

한 번 실제 기대응답을 받아서 그대로 전달 해보는게 좋을 것 같아요 전에 MockedProvider 에 버그가 있어서 쓰지 않았던 기억이 있는데요.. 혹시 codegen 으로 인터페이스를 만들어 사용하신다면 useQuery/useMutation 훅 자체를 모킹하는게 더 쉬울 수 있습니다

@Hyeseong Kim codegen으로 인터페이스 만들어서 사용중입니다. 혹시 useQuery/useMutation 훅 자체를 모킹한다는 걸 조금 더 상세히 설명해 주실 수 있을까요?

1. 코드젠이 생성한 useXXXQuery 자체를 스파이하는 방법, 코드젠이 생성한 모듈을 jest.fn()으로 대체한 다음 결과를 mockImplementationOnce 해가며 유닛테스트 하는 건 비교적 쉽습니다. 2. 테스트 프레임워크를 대체하는 방법…. cypress 나 msw 같은 경우 네트워크 레벨 스파이를 제공합니다. 3. 서버를 통째로 mocking 하는 방법… 저는 전에 1번이 버그에 막히길래 서버 하나 짜서 테스트 했었네요 하하; 찾아보면 스키마에 목 입혀주는 도구들이 몇개 있습니다.

답변 감사합니다. 알려주신 방법들 알아볼게용! 🙂 자체 패키지를 만들어서 쓰시는군요. 멋져요!

그러고보니 act 가 빠진곳이 밑에 있었군요

넵 ㅎㅎ 디버깅 하다보니 각 act마다 component의 로직을 실행시키는 방식으로 동작하더라구요. 그래서 저렇게 코드를 바꿨더니 테스트가 잘 됐습니당 🙂 혜성님께서 알려주신 방법도 좀 더 공부해보려구요. 감사합니당.