https://facebook.com/groups/graphql-kr logo
#질문
Title
# 질문
u

박준혁

06/30/2020, 10:10 AM
apollo client mutation test에 관해서 질문드려용. UI 플로우 유저가 여러 개의 input value를 수정합니다. 유저가 생성 버튼을 클릭하면 create mutation이 api 서버로 요청됩니다. 문제 상황 @apollo/react-testing 라이브러리의 MockedProvider를 사용하여 테스팅 중입니다. 이 때, 아래와 같이 테스트를 하는데,
Copy code
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":[]}}
다음과 같은 문제가 발생하고 있습니다. 몇 시간째 이슈도 찾아보고 하는데 해결이 안돼서 도움 요청드려요.
테스팅 돔에서는 다음과 같이 input value가 정상적으로 잘 입력돼있는데도 안되네용 😞
https://www.apollographql.com/docs/react/development-testing/testing/#testing-loading-states
Copy code
Your mock request's variables object must exactly match the query variables sent from your component.
해당 페이지에도 이렇게 말하곤 있는데, 어떻게 정확히 match시킬 수 있는지 모르겠네용 😞
h

Hyeseong Kim

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

박준혁

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

Hyeseong Kim

07/01/2020, 2:25 AM
1. 코드젠이 생성한 useXXXQuery 자체를 스파이하는 방법, 코드젠이 생성한 모듈을 jest.fn()으로 대체한 다음 결과를 mockImplementationOnce 해가며 유닛테스트 하는 건 비교적 쉽습니다. 2. 테스트 프레임워크를 대체하는 방법…. cypress 나 msw 같은 경우 네트워크 레벨 스파이를 제공합니다. 3. 서버를 통째로 mocking 하는 방법… 저는 전에 1번이 버그에 막히길래 서버 하나 짜서 테스트 했었네요 하하; 찾아보면 스키마에 목 입혀주는 도구들이 몇개 있습니다.
생성된 타입이 따라오도록 유틸함수를 만들 필요는 있습니다. 저는 이런거 만들어 씁니다. https://github.com/cometkim/cometjs/blob/master/packages/jest-utils/src/mock.ts#L24-L49
근데 require.requireActual 이 deprecated 됐다고 들은거 같으니 실 구현 섞어 쓰는건 빼야겠네요
아 그냥 위치가 jest.requireActual 로 바뀐거군
u

박준혁

07/01/2020, 2:38 AM
답변 감사합니다. 알려주신 방법들 알아볼게용! 🙂 자체 패키지를 만들어서 쓰시는군요. 멋져요!
다음과 같이 react state에 변경을 주는 event를 각각 act 함수로 감싸주니 해결됐습니다! 다른 분들 이 이슈로 삽질하지 마시라고 공유드려용!
h

Hyeseong Kim

07/01/2020, 6:01 AM
그러고보니 act 가 빠진곳이 밑에 있었군요
u

박준혁

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