Jest에서 window 환경 커스텀 설정 (window, navigator, etc.)

테스트를 진행하기에 앞서 Jest에서 window에 접근하기 위한 설정을 해야 한다. 아래 글을 통하여 window 객체에 접근할 수 있는 환경을 만들어 주었다면 이제는 테스트 환경을 커스터마이징 해줄 수 있다.

 

이러한 커스텀이 필요한 이유는 window.location.href에 접근하기 위하여 테스트 파일 내부에 일일이 window 객체를 mocking 해야 하는 번거로움을 제거하며, 변하지 않는 상수 값들을 환경 내부에 설정할 수 있기 때문이다. 필요하다면 크로스 브라우징과 관련한 테스트를 진행할 때도 사용할 수 있다.

 

Jest에서 window 객체 접근하기

 

---

 

Jest window 환경 설정

1. jest.setup.js 파일을 root 폴더에 생성 후 아래와 같이 입력한다.

Object.defineProperty(window, 'location', {
  value: {
    href: 'https://somedaycode.tistory.com',
  },
});

 

2. jest.config.js 에 setupFilesAfterEnv 설정을 추가한다.

module.exports = {
  ...기존 설정...
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
};

 

setupFilesAfterEnv란, 테스트파일이 실행되기 이전에 내부의 코드들이 실행될 수 있도록 해준다. 

 

setupFiles와는 다르게 테스트 프레임워크가 테스트 환경에 설치된 이후, 즉시 실행된다.

 

쉽게 말해 주석을 통해 jsdom 환경을 만들어준 테스트 파일이 실행되기 이전에 jest.setup.js에 작성된 코드들이 실행된다.

 

---

아래와 같이 mocking을 따로 해주지 않아도 바로 URL에 접근이 가능하다.

test('window.location.href 값은 https://somedaycode.tistory.com 이다.', () => {
  const url = 'https://somedaycode.tistory.com';
  expect(window.location.href).toBe(url);
});

 

테스트 성공 

test success

 

 

** 이외에도 Navigator의 설정을 바꾸거나, window에 존재하는 여러 프로퍼티의 값들을 커스터마이징하여 사용할 수 있다.