window.location.origin - 웹사이트 기본 주소(origin) 가져오기

문제 상황

내 애플리케이션의 기본 주소에 어떻게 접근할 수 있을까?

당신... 이제는 브라우저의 주소창도 확인할 줄 모르게 된 것이오? 라고 생각하실 수 있지만

로컬 환경에서 루트 디렉토리로써 http://localhost:3000/와 같이 주소를 작성하여 테스트를 통과한다 한들 테스트 환경이 달라지면 해당 주소는 무용지물이 되어버리고 맙니다. 그래서 현재 실행중인 환경의 주소에 접근할 수 있는 방법이 필요했습니다.

해결

window.location.origin

origin으로 접근하면 프로토콜과 호스트로 구성된 문자열을 반환합니다. origin은 출처를 의미하며, 프로토콜://호스트:포트번호로 구성되지만 http 프로토콜은 80번, https 프로토콜은 443번 포트를 사용하는 경우 포트 번호가 생략되므로 같이 표시되지 않는 경우가 대다수입니다. 포트 번호를 따로 표시해야 하는 경우는 일반적으로 80번 포트 또는 443번 포트를 사용할 것으로 기대됨에도 불구하고 다른 포트를 사용하는 경우입니다.

window.location.href

href로 접근하면 현재 위치한 주소 전체의 문자열을 반환합니다.

---

활용 예시

import { fireEvent, render, screen } from "@testing-library/react";
import { Header } from "shared/ui/header";
import { BrowserRouter } from "react-router-dom";

test("헤더의 로고를 누르면 메인 페이지로 이동되어야 합니다.", () => {
  render(<Header />, { wrapper: BrowserRouter });
  const linkElement = screen.getByAltText("로고");
  fireEvent.click(linkElement);
  // 루트 디렉토리 slash 주의
  expect(location.href).toEqual(window.location.origin + "/");
});