[질문] react-color 등 외부에서 선언된 component의 테스트 코드 작성 방법

[engineerA314]

저희 조의 frontend 구현에서는 ClothDetailModal component 에서 색 옵션 선택을 위해 "react-color" GithubPicker 와날짜 선택을 위해 "react-datepicker" 의 DatePicker를 사용하고 있습니다.

    <GithubPicker
        data-testid="cloth-info-input-color"
        color={colorHex}
        colors={COLOROPTIONS}
        onChange={colorHandler}
    />

  <DatePicker
      data-testid="date-picker"
      dateFormat="yyyy/MM/dd"
      highlightDates={highlightDates}
      selected={wearDate}
      onChange={(clickedDate: any) => setWearDateHandler(clickedDate)}
      inline
  />

이 둘을 테스트하기 위해서 구현 코드 내에서는 data-testid를 추가하고, test 코드 내에서는 getByTestId를 이용해 이들을 가져와 테스트하려고 하였습니다.

    it("should handle datePicker", () => {
        render(clothdetailmodalWearDate);
        const datePicker = screen.getByTestId("date-picker");
        fireEvent.mouseDown(datePicker);
        fireEvent.change(datePicker, { clickDate: "2022/12/03" });
    });

하지만 이렇게 테스트 코드를 짤 경우, datePicker 와 GithubPicker 가 렌더링된 내용에는 testid 가 존재하지 않아, 이들을 가져올 수 없었습니다.

또 이런 식으로 screen에서 이들을 가져오더라도, 각 component의 내부 동작에 대해 완전히 이해하지 못하고 있기 때문에 이들을 테스트하기가 어려울 것 같습니다.

위의 코드에서 보이다시피, 이들을 이용한 ClothDetailModal 의 작동은 이들의 onChange에만 의존하고 있습니다. 이를 쉽게 테스트하는 방법이 있는지 궁금합니다.