Jest로 Frontend 테스팅 할 때 힘들었던 점들 정리

기존에 테스트 코드를 열심히 짜던 환경도 아니었기도 하고, 프론트엔드 환경에서의 테스트 코드 작성은 처음이다보니 이것저것 어려운 점이 많았다.

문제를 해결해 나가면서 사용한 방법들을 정리해 보았습니다.

process.env 모킹하기

운영과 개발 환경을 분기 처리를 하기 위해서는, 다음과 같이 process.env에 의존하게 되는 코드를 짜게 될 때가 많다.

export const siteURL =
  process.env.REACT_APP_ENV === 'production'
    ? 'https://naver.com'
    : 'http://localhost:3000';

이 때 아래 처럼 코드를 짜게 될 경우 예상한대로 동작하지 않는다.

it('production일 때 도메인 주소로 설정된다', () => {
  process.env.REACT_APP_ENV = 'production';

  expect(process.env.REACT_APP_ENV).toBe('production');
  expect(siteURL).toBe('https://naver.com');
});

왜냐하면 siteURL은 테스트 코드를 실행할 시점에 이미 production이 아니게 되어 localhost로 값이 확정되었고, 뒤늦게 production으로 값을 바꿔보아야 이미 늦었기 때문이다.

따라서 다음과 같이 다시 require를 통해 import를 받아오는 방식을 사용하면 해결된다.

it('production일 때 도메인 주소로 설정된다', () => {
  process.env.REACT_APP_ENV = 'production';
  const testedModule = require('../../constants/url');

  expect(process.env.REACT_APP_ENV).toBe('production');
  expect(testedModule.siteURL).toBe('https://naver.com');
});

또한, 바뀐 환경 변수가 다른 테스트에 영향을 주지 않도록 테스트 간 격리성을 위해서 다시 되돌려놓는 것이 중요하다.

describe('siteURL은', () => {
  describe('process.env.REACT_APP_ENV가', () => {
    const originalENV = process.env;

    beforeEach(() => {
      jest.resetModules();
      process.env = { ...originalENV };
    });

    afterEach(() => {
      process.env = originalENV;
    });

    it('production일 때 도메인 주소로 설정된다', () => {
      process.env.REACT_APP_ENV = 'production';
      const testedModule = require('../../constants/url');

      expect(process.env.REACT_APP_ENV).toBe('production');
      expect(testedModule.siteURL).toBe('https://naver.com');
    });

    it('production이 아닐 때 내 컴퓨터 주소로 설정된다', () => {
      expect(process.env.REACT_APP_ENV).not.toBe('production');
      expect(siteURL).toBe('http://localhost:3000');
    });
  });
});

현재 URL 받아오기 (window.location)

추후 추가..