React에서 컴포넌트가 unmount되었을 때 특정 동작 수행 여부 테스트하기

@testing-library/react를 이용하는 경우

@testing-library/react 에서 제공하는 render 함수는 반환형으로 여러 콜백 함수들을 제공, 해당 함수들을 필요한 테스트에 사용할 수 있음.

 

그 중 여기서 사용해볼 것은 unmount()

 

 

실시간 채팅 컴포넌트 창이 화면에서 사라질 때, 상태 관리 Store에 정의한 클라이언트와 서버의 연결을 해제하는 disconnect()를 호출하는지 테스트할 것임

 

컴포넌트가 unmount될 때 수행하는 로직은 다음과 같이 useEffect 구문 내에 정의해놓을 수 있음

useEffect 내에서 콜백 함수를 반환시키고, 해당 콜백 함수 내에 수행시킬 동작을 정의

// src/components/chatting-room/ChattingRoomMessageLogs.jsx

export default function ChattingRoomMessageLogs({
  roomId,
}) {
  useEffect(() => {
    // do something

    return () => {
      if (chattingStore.connected) {
        chattingStore.disconnect();
      }
    };
  }, []);
  
  return (
  	// components
  );
}

 

 

다음과 같이 테스트할 수 있음

 

// src/components/chatting-room/ChattingRoomMessageLogs.test.jsx

import context from 'jest-plugin-context';

const disconnect = jest.fn();
jest.mock('../../hooks/useChattingStore', () => () => ({
  disconnect,
}));

describe('ChattingRoomMessageLogs', () => {
  function renderChattingRoomMessageLogs(roomId) {
    return render((
      <ChattingRoomMessageLogs
        roomId={roomId}
      />
    ));
  }
  
  beforeEach(() => {
  	roomId = 1;
  });

  context('클라이언트가 서버와 연결된 상태에서 실시간 채팅 메시지 컴포넌트가 unmount되는 경우', () => {
    beforeEach(() => {
      connected = true;
    });

    it('해당 클라이언트와 서버의 연결을 해제시키는 함수 호출', () => {
      const { unmount } = renderChattingRoomMessageLogs(roomId);

      unmount();
      expect(disconnect).toBeCalled();
    });
  });
});

 

unmount()를 수행하면 테스트 코드 내에서 render한 컴포넌트를 unmount시키므로, useEffect 내부에서 콜백 함수로 반환하는 로직의 수행 여부를 검증할 수 있음

 

 

Window Event Listener를 이용하는 경우

컴포넌트가 unmount되는 경우가 아니라, 애플리케이션이 띄워진 브라우저 화면 자체가 종료되는 방식으로 클라이언트와 서버 간의 연결이 종료되는 경우가 있을 수도 있음

 

이러한 경우 테스트 코드에서 window 객체를 이용해 브라우저 화면이 종료되는 이벤트를 발생시키는 방식을 사용할 수 있음

 

먼저, 소스코드 내에 브라우저 화면이 닫히기 전 수행할 동작을 다음과 같이 정의

// src/components/chatting-room/ChattingRoomMessageLogs.jsx

export default function ChattingRoomMessageLogs({
  roomId,
}) {
  const beforeunloadListener = (() => {
    if (chattingStore.connected) {
      chattingStore.disconnect();
    }
  });

  window.addEventListener('beforeunload', beforeunloadListener);
  
  return (
  	// components
  );
}

 

다음과 같이 테스트할 수 있음

 

context('클라이언트가 서버와 연결된 상태에서 브라우저 창을 닫는 방식으로 채팅방을 나가는 경우', () => {
  beforeEach(() => {
    connected = true;
  });

  it('해당 클라이언트와 서버의 연결을 해제시키는 함수 호출', () => {
    renderChattingRoomMessageLogs(roomId);

    window.dispatchEvent(new Event('beforeunload'));
    expect(disconnect).toBeCalled();
  });
});

 

 

 

References

- https://testing-library.com/docs/react-testing-library/api/#unmount

- https://github.com/karma-runner/karma/issues/1062