CKeditor 리액트에서 테스트 코드짜기[20221110-TIL]

외부 라이브러리는 어떻게 테스트 코드를 짤까?

CKeditor라는 외부 라이브러리를 사용했는데 이걸 대체 어떻게 테스트 코드를 짜나... 고민했다.

트레이너 님에게 물어보니 외부 라이브러리는 그냥 그 자체에게 맡기고 테스트 코드를 따로 작성하지 않는다고 한다.

 

그럼 어떻게 mocking을 해 올 수 있을까??

 

컴포넌트는 결국 함수다

컴포넌트는 결국 함수기 때문에 라이브러리를 불러온 위치를 써주고 jest.fn()으로 정의 내려 주었다.

import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

jest.mock('@ckeditor/ckeditor5-react', () => ({
  CKEditor: jest.fn(),
}));
jest.mock('@ckeditor/ckeditor5-build-classic', () => '');

 

외부 라이브러리가 무엇인지 함부로 속단 말자

그리고 또 배운 것이 있다면 아래처럼 입력하는 곳을 input으로 하여 CKeditor도 똑같이 label을 만들어 id를 넣어 연결해주었다.

그러니 자꾸 테스트 코드에서 오류가 떴는데 트레이너 분 말씀이 이것이 어떻게 input이라고 확신하냐는 것이었다.

그게 그냥 '우연'일뿐이라고 했다.

 

 

  <div>
        <label htmlFor="input-title">제목</label>
        <input
          id="input-title"
          type="text"
          name="title"
          value={talkFormStore.title}
          onChange={(e) => talkFormStore.changeTitle(e.target.value)}

        />
      </div>
      <div>
        <label htmlFor="input-hashTags">해쉬태그</label>
        <input
          id="input-hashTags"
          type="text"
          name="hashTags"
          value={talkFormStore.hashTags}
          onChange={(e) => talkFormStore.changeHashTags(e.target.value)}
        />
      </div>

그래서 아래처럼 input과 label 형식을 버리고 div로 묶어주니 

<div>내용</div>
        <CKEditor
          editor={ClassicEditor}
          data="<p>Hello from CKEditor 5!</p>"
          name="content"
          onChange={handleChangeContent}
        />

이러면 패스

추가 사항

1. 반드시 테스트 코드를 짤 때는 반드시 다른 테스트들이 전부 통과하게 한 후 작성한다. -> 아니면 어디서 오류가 나거나 의존성이 잘못 주입되었는지 파악할 수가 없다.

2. 모두 통과시키기 어렵다면 통과되지 않는 테스트는 주석 처리한 후 일단 올 그린을 본다.

3. 보고 있는 창은 그때그때 저장 후 종료하여 작업 인지 부하를 줄인다.

 

 

위 모두 읽으면 응 당연하지 하지만 지키기 어려운 것들이다.
좋은 습관으로 좋은 코드를 만들자.