스냅샷 파일 관리하는 방법

요즘 jest, testing-library로 테스트 코드 작성하는 방법을 공부하고 있는데요. 그 중에 스냅샷 테스팅을 하면서 어떻게 해야지 파일들을 효율적으로 관리할 수 있을지에 대해 고민했습니다.

jest는 기본적으로 스냅샷 테스트를 하게 되면 테스트 파일과 같은 위치에 __snapshot__폴더를 만들고 그 안에 스냅샷 파일들을 관리합니다. 그런데 이렇게 프로젝트를 관리하면 엄청나게 많은 수의 스냅샷 폴더들이 생성이 될 것이고 이는 좋은 방법은 아니라고 생각했습니다.

테스트 파일과 같은 위치에 스냅샷 파일이 위치하도록 하고 싶었죠. 그래서 검색을 해본 결과 jest에서는 snapshotResolver라는 설정을 제공하고 있습니다. 스냅샷 파일들을 어떻게 처리할지에 관한 설정이죠.

jest.config.js

먼저 jest.config.js파일에 아래 코드와 같이 설정을 합시다.

module.exports = {
  snapshotResolver: "<rootDir>/config/snapshotResolver.js",
};

snapshotResolver

snapsotResolver 모듈을 만들고 그안에 아래 코드를 작성합니다.

export default {
  testPathForConsistencyCheck: "some/example.test.tsx",
  resolveSnapshotPath: (testPath, snapshotExtension) => {
    return testPath.replace(
      /\.test\.([tj]sx?)/,
      `.test.$1${snapshotExtension}`
    );
  },
  resolveTestPath: (snapshotFilePath, snapshotExtension) => {
    return snapshotFilePath.replace(snapshotExtension, "");
  },
};

• testPathForConsistencyCheck: 테스트 파일의 예시입니다.
• resolveSnapshotPath: 스냅샷 파일의 path를 정의합니다. 위의 코드에서는 스냅샷의 확장자를 추가해줬습니다.
• resolveTestPath: 테스트 파일의 path를 정의합니다. 스냅샷 확장자를 제거했습니다.

위의 설정을 하게 되면 아래 그림처럼 파일, 테스트파일, 스냅샷파일을 같은 위치에서 관리할 수 있기 때문에 더 효율적이라고 생각했습니다.