Jest 에서 snapshot 생성되는 경로 수정하는 방법 (react-testing-library)

 

이전 글에서 jest와 react-testing-library를 통해 react 유닛 테스트 하는 법을 살펴봤습니다.

그런데 toMatchSnapshot 테스트를 통해 컴포넌트 테스트를 하는 경우 한 가지가 아쉬웠는데요,

바로 snapshot 파일이 생성되는 경로였습니다.

 

그래서 저는 컴포넌트 위치에 스냅샷 파일이 생기는 것이 파일구조를 복잡하게 만드는 것 같아서 따로 모아두고 싶었습니다.

한 번 어떻게 경로를 바꿀 수 있는지 살펴볼게요!

 

1. snapshot 파일 모아둘 경로 생성

일단 루트 디렉토리에 관련된 파일을 전부 담아둘 tests라는 폴더를 만들었습니다. 그리고 그 안에 snapshot 파일을 모아두기 위한 __snapshots__ 라는 폴더도 생성할게요.

 

 

2. jest.config.js 설정

그리고 jest 관련 설정을 만들기 위해 jest.config.js 라는 파일을 생성하여 다음과 같이 추가해줍니다.

module.exports = {
  testPathIgnorePatterns: ["<rootDir>/.next/", "<rootDir>/node_modules/"],
  setupFilesAfterEnv: ["<rootDir>/setupTests.js"],
  snapshotResolver: "<rootDir>/tests/snapshotResolver.js",
}

 

마지막 줄이 관련된 내용인데요, 아까 만들었던 tests 폴더 안에 snapshotResolver.js 라는 파일을 통해서 디렉토리를 변경하도록 설정했습니다. 그럼 해당 위치에 파일을 만들어 볼까요?

 

 

3. snapshotResolver.js 설정

위의 jest.config.js에서 설정한 경로에 파일을 생성했습니다.

module.exports = {
  resolveSnapshotPath: (testPath, snapshotExtension) =>
    testPath
      .replace("components/", "tests/__snapshots__/components/")
      .replace("containers/", "tests/__snapshots__/containers/") + snapshotExtension,

  resolveTestPath: (snapshotFilePath, snapshotExtension) =>
    snapshotFilePath
      .replace("tests/__snapshots__/components/", "components/")
      .replace("tests/__snapshots__/containers/", "containers/")
      .slice(0, -snapshotExtension.length),

  testPathForConsistencyCheck: "components/some.test.ts",
}

 

우선 resolveSnapshotPath를 통해서 components 폴더와 containers 폴더에서 생기는 snapshot을 tests/__snapshots__/ 으로 이동하게 만들었습니다. 뒤에 붙은 snapshotExtention은 스냅샷 파일에 붙은 .snap 확장자를 의미합니다.

그래서 components/Account.test.tsx라는 테스트 파일에서 생성된 스냅샷은 tests/__snapshots__/components/Account.test.tsx.snap 으로 생기게 되는 것이죠.

 

그리고 resolveTestPath는 스냅샷 파일이 비교되어야 하는 테스트 파일을 역으로 확인하는 과정인데요, 따로 설정을 안한다면 스냅샷 파일이 존재하는 위치에서 찾게 됩니다. 즉, tests/__snapshots__/components 경로에서 Account.test.tsx 파일을 찾는 것이죠. 그래서 역으로 경로를 제대로 찾아서 비교할 수 있도록 수정한 것입니다. 마지막에 slice를 한 것은 스냅샷 파일은 Account.test.tsx.snap 이기 때문에 테스트 파일과 비교하려면 .snap 확장자를 뗴어내야 하고 그 파일을 Account.test.tsx으로 만들기 위해 slice한 것입니다.

 

(저는 컴포넌트를 두 폴더에 나누어서 저장하기 때문에 그렇게 설정하였고, components 폴더에만 있다면 replace는 그 부분만 설정하시면 됩니다.)

 

※ 관련해서 궁금한 내용은 해당 문서를 참조하시면 됩니다.

 

 

4. 확인해보기

저는 components랑 containers 폴더에 각각 Account.tsx와 테스트파일인 Account.test.tsx를 만들었는데요, yarn test를 시행하니 다음과 같이 원하는 경로에 테스트 스냅샷 파일이 생성된 것을 확인할 수 있었습니다.