Jest - clipboard test

📌시작하며

개인 프로젝트 테스트 작성에서 오랜 시간 진행이 안되었던 부분이 있었다. 사용자가 share-button을 클릭하면 clipboard에 원하는 url이 제대로 복사가 되는지에 대한 문제였는데 테스트 통과 의 문제가 아니라, 테스트 작성 자체가 잘못되었다는 에러가 발생했다… 😥

✅실제 UI 흐름

내가 테스트하고자 하는 UI의 흐름은 다음과 같다.

1. 사용자가 ImageCard를 클릭하면 zustand를 이용해 해당 ImageCard data를 Modal 컴포넌트로 넘겨준다.
2. Modal Component가 렌더링 되며 share-button을 제공한다.
3. 사용자가 share-button을 클릭하면, 복사가 완료되었다는 alert을 제공한다.
4. 사용자의 clipboard에 이미지 url이 복사된다.

1번의 zustand 관련 테스트의 경우 이미 시행착오를 거쳐 완료된 부분이어서 문제가 되지 않았으나, 3번 4번 흐름에서 계속해서 에러가 발생했다.

✅1차 시도

1차 시도는 다음과 같다. global 객체를 사용하여 navigator를 mock 처리하려고 했으나… clipboard가 readOnly 이기 때문에 불가하다는 메세지가 나왔다.

Cannot assign to ‘clipboard’ because it is a read-only property.ts(2540)

 global.navigator.clipboard = {
    writeText: jest.fn().mockResolvedValue(),
  };

✅2차 시도

나와 같은 에러를 겪었고, 해결했다는 블로그 글을 보고 spyOn을 도입해보고자 했으나… 이 또한 에러가 발생했는데,

const writeTextMock = jest.spyOn(navigator.clipboard, 'writeText').mockResolvedValue();

다음과 같이 작성했으나

expect(writeTextMock).toHaveBeenCalledWith(mockImageData[0].largeImageURL);

toHaveBeenCalledWith 부분에서 Number of calls: 0 라는 에러가 발생했다. writeTextMock이 제대로 호출되지 않았다는 문제였는데…

✅3차 시도

혹시 위에서 발생하는 문제가, click event 처리 시점과 관련된 문제일까 해서 waitFor로 감싸 실행해보았고, 이번엔 alert에서 문제가 발생해 아래와 같이 간단하게 mock 처리 해주었다.

window.alert = jest.fn();

//waitFor로 감싸 시도한 코드
await waitFor(() => {
  expect(writeTextMock).toHaveBeenCalledWith(mockImageData[0].largeImageURL);
});

✅최종

여러 시도 끝에 최종적으로 테스트를 진행할 수 있었던 코드는 다음과 같다.

블로그에서 보았던, 해결 방법 전에, Jest 환경에서는 기본적으로 존재하지 않는 navigator.clipboard를 Object.defineProperty를 통해 정의하고 spyOn을 통해 이미 정의된 navigator.clipboard.writeText의 호출 횟수 등을 감시하도록 한 것이다.

 it("사용자가 공유 버튼을 클릭하면 해당 URL이 복사된다.", async () => {
    // alert를 mock 처리 한다.
    window.alert = jest.fn();

    // global.navigator 객체에 clipboard 속성을 정의한다.
    Object.defineProperty(global.navigator, "clipboard", {
      value: {
        writeText: jest.fn(),
      },
      writable: true,
    });

    const writeTextMock = jest
      .spyOn(navigator.clipboard, "writeText")
      .mockResolvedValue();

    // mock 데이터 및 store 설정
    mockModalImageIdStore({ modalImage: mockImageData[0] });

    // Modal 컴포넌트 렌더링
    const { getByTestId } = render(<Modal />);

    const shareButton = getByTestId("share-button");

    // 클릭 이벤트를 발생시킨다.
    fireEvent.click(shareButton); 

    // writeTextMock 호출 여부를 검증한다.
    await waitFor(() => {
      expect(writeTextMock).toHaveBeenCalledWith(mockImageData[0].largeImageURL);
    });
  });

최종적으로 테스트가 작동해 PASS 되었다.

🙋‍♀️ 마무리

블로그 글은 간단하게 적었지만 이 clipboard 테스트에 꽤 애를 먹었다. 😥 이러면 테스트 하는데 시간이 너무 많이 소요되는건 아닐까 위축되기도 했고…

하지만 어떻게든 해냈기에 먼저 스스로 박수🤗(ㅎㅎ)를 보내본다.

이번 프로젝트에서는 일부러 실제로 화면에 필요없는 컴포넌트를 만들어 story를 작성하기도 해쏘, state를 사용해도 상관없는 로직에 zustand를 써서 렌더링 해 보는 등 더 생각해보고 테스트를 작성해야 하는 상황을 만들었다.

직접 작성해보는 과정에서 많이 배울 수 있었고, 지금도 여전히 배우고 있다고 생각한다.

실무에 적용할 수 있는 그날까지 힘내보자 파이팅!

🗂️참고 사이트

• https://dev.to/andrewchaa/mocking-navigatorclipboardwritetext-in-jest-3hih
• https://stackoverflow.com/questions/69574777/getting-undefined-error-when-operating-on-a-mocked-window-navigator-object