[Vue.js] Snapshot 테스팅 시 주의할 점

문제 발생

최근 TDD에 익숙해지기 위해 백엔드건, 프론트엔드건 테스팅 툴을 최대한 활용하려고 노력하고 있습니다.

프로젝트 생성 시 자동으로 생성되는 README.md 파일을 열어보면, 다음 명령어로 테스트 하라고 지시합니다.

npm run test:unit

다만 Snapshot을 생성하는 Testing을 할 경우, 다음과 같은 어이없는 상황을 마주하게 될 수도 있습니다.

작성한 테스트는 통과하는데 jest가 exit code 1을 반환해서 테스트 결과가 실패로 나옵니다.. 8ㅅ8...

Obsolete Snapshots

화면이 잘 렌더링 되었는지 확인하기 위해 다음과 같은 테스트를 작성하였다고 가정합니다.

...
  it('renders correctly', () => {
          const wrapper = mount(App)
          expect(wrapper.element).toMatchSnapshot()
  })
...

이 경우 스냅샷이 생성되고 프로젝트 폴더 내에 저장됩니다. 이런 경우에는 npm으로 테스트 하여도 테스트가 잘 통과합니다.

그런데 해당 테스트가 필요없어서 삭제하게 되면 문제가 발생합니다. Snapshot을 이용하는 테스트는 없는데 존재하는 Snapshot을 Obsolete Snapshot이라고 합니다. Obsolete Snapshot이 존재하는 경우 테스트가 모두 통과해도 jest가 exit code 1을 반환하고 Actions에서 테스트가 실패하게 됩니다.

해결..?

다만 아래와 같이 기본 테스트 명령에 단순히 -u 옵션을 주어서는 해결되지 않습니다...

npm run test:unit -u

진짜 해결

./node_modules/.bin/vue-cli-service test:unit -u

npm run을 이용하는 것이 아니라 vue-cli-service를 이용하면 -u 옵션을 적용하여 테스트가 끝나면 snapshot을 삭제할 수 있습니다. 테스트가 변경되어 사용하지 않는 Snapshot이 생기는 경우 위 명령을 이용해 삭제해주고 나면, npm으로 테스트해도 테스트가 모두 통과하게 됩니다.

Makefile을 이용해 작성해 두면 편리할 것 같습니다.