Testing library Async Form Test (Axios 오류)

테스트 코드 작성간 미루고 미루던 Form Test가 끝났다.. 그것에 대해서 작성한다!

기존부터 알고 있었던 오류였고, 무엇이 문제인지는 모르지만 form 에 async 가 없으면 테스트가 잘 통과되었었다...

따라서 테스트코드 작성은 아직 잘 모르니깐 Form 을 수정하는 방향을 채택하여서 async 를 밖에다가 사용해보고 새로운 상태를 만들어서 useEffect 를 사용해서 배열에 의존성 주입하여서 배열이 추가될때마다 새로운 배열에다가 api get 을 통해서 상태도 만들어 보곤 했다. 하지만,,, 잘 되지 않았고, 뭔지 모르지만 useEffect 사용할 때 배열을 추가하니깐 배열의 맨 마지막 입력은 입력이 안되는 현상을 찾았었다.

따라서 기존 코드를 그대로 두고 테스트코드를 수정하는 방향을 채택하였다.

인간 디버깅을 통해서 문제가 되는 요소(하나하나 지워가고 추가해보면서)를 찾다가, 무언가 마음에 걸리는 부분을 찾아버렸다. (사실 마음으로는 문제가 알고있던듯)

바로 api get 하는 부분에서 오류가 뜬 것!

Axios Network Error (Failed to load resource: net::ERR_CONNECTION_REFUSED)

음,,, 네트워크 오류라,, 관련은 없어보이지만 jest 에서 데이터 송신에 문제가 있었을 거라 추정한다.

원인은 모르겠다,,,

해결방법은

import axios from "axios";

jest.mock("axios");
const mockedAxios = axios as jest.Mocked<typeof axios>;

를 테스트하는 곳에다가 적용하고,

     mockedAxios.get.mockResolvedValue({
        data: {
          predict: "-94.0993070602417",
        },
      });

를 적용하면 끝난다.. 내생각에 데이터 송신하고 나서 그에 대한 예측되는 결과를 미리 입력해주어 비교하는 절차를 겪기 때문이지 않을까? 란 나의 생각이다. 이거에 대한 설명은 아무리 찾아도 잘나오지 않아서 알아내지 못했다 ㅠㅠ

전체적인 axios get form test 코드이다.

const renderPredictPage = () => {
  /* 컴포넌트 렌더링 */
  const result = render(<Predict />);

  /* input check 를 위한 MOCK data */
  const MOCK_COMMENT = { value: "테스트용댓글" };

  /* API 작동여부 테스트 */
  const F0CK_COMMENT = { value: "씨발" };
  const CENSOR_MESSAGE = "^^ld가 작동하였습니다.";

  /* Component 에서 DOM 을 가져온다. */
  const VideoTitle = () => result.getByText("Language-Purifier 를 소개합니다!");
  const VideoMaker = () => result.getByText("One Juice");
  const SubscribeCounts = () => result.getByText("구독자 5명");
  const VideoDesc = () => result.getByText("조회수 12회");
  const CommentCounts = () => result.getByText("댓글 0개");
  const BadDisplayButton = () => result.getByText("나쁜 댓글 보기");
  const GoodDisplayButton = () => result.queryByText("나쁜 댓글 숨기기");
  const CommentInput = () => result.getByPlaceholderText("댓글 추가...");
  const CommentSubmit = () => result.getByText("작성");
  const CommentTest = () => result.queryByText(MOCK_COMMENT.value);
  const CommentAPITest = () => result.queryByText("^^ld가 작동하였습니다.");

  /* DOM 요소와 상호작용을 담당 */
  const clickBadDisplayButton = async () => {
    await act(async () => {
      fireEvent.click(BadDisplayButton());
    });
  };

  const changeCommentInput = () => {
    fireEvent.change(CommentInput(), {
      target: {
        value: MOCK_COMMENT.value,
      },
    });
  };
  const changeF0ckCommentInput = () => {
    fireEvent.change(CommentInput(), {
      target: {
        value: F0CK_COMMENT.value,
      },
    });
  };
  const clickCommentSubmit = () => {
    fireEvent.click(CommentSubmit());
  };

  return {
    VideoTitle,
    VideoMaker,
    SubscribeCounts,
    VideoDesc,
    CommentCounts,
    BadDisplayButton,
    GoodDisplayButton,
    CommentInput,
    CommentSubmit,
    MOCK_COMMENT,
    F0CK_COMMENT,
    CENSOR_MESSAGE,
    clickBadDisplayButton,
    changeCommentInput,
    changeF0ckCommentInput,
    clickCommentSubmit,
    CommentTest,
    CommentAPITest,
  };
};

해당 renderPredictPage의 함수들을 아래의 적용한 것이다.

mockedAxios.get.mockClear() 는 이 테스트 위에 입력테스트를 한번 진행하였는데 이걸 클리어해주지 않으면 오류가 뜨더라,,, 아무래도 남아있나보더라!,,,

더 자세한 소스코드