NuxtJS + TypeScript 개발 기록 (3) Vue 구성 요소 테스트 중 오류

지난번 까지로 환경 구축이 끝났으므로 개발을 진행하고 있었지만, 테스트로 묘한 에러가 나오게 되었다.

モジュール '@/components/Counter.vue' が見つかりません。

경로에 구성 요소가 존재하고 Nuxt 테스트 서버에서 문제없이 작동합니다. 또한 구성 요소 이외의 (모델 클래스와 같은) 테스트는 문제가 없습니다.

먼저 결론

테스트 파일을 Counter.spec.vue로 변경

테스트 파일을 Vue SFC로 변경

Jest 설정 변경

원인(추측)

Jest 설정에서 다음과 같이 transform를 지정하는 부분이 있습니다.

package.json(발췌)

"jest": {
  "transform": {
    "^.+\\.ts$": "ts-jest",
    ".*\\.(vue)$": "vue-jest"
  }
}

테스트 파일 Counter.spec.ts 오류는

.ts 그래서 ts-jest 에서 처리된다

.vue 파일을 import 시도

ts-jest .vue 파일을 가져올 수 없습니다

라는 흐름이 아닌가?

( 전회 에서 환경을 방금 만들었을 때, 에러는 일어나지 않았다. 그 후 vue-property-decorator 관계 있는 것일까……?)

대책

원인이 추측대로라면, 테스트 파일도 vue-jest 로 처리되도록 해 버리면 좋을 것이다.
Counter.spec.ts의 파일 이름을 Counter.spec.vue로 변경합니다. 그 뿐이라면 문법 에러로 화나지만, 아래와 같이 script 태그로 둘러싸면 OK.

Counter.spec.vue

<script lang="ts">
import { mount } from '@vue/test-utils';
import Counter from '@/components/Counter.vue';

describe('Counter', () => {
  test('is a Vue instance', () => {
    const wrapper = mount(Counter);
    expect(wrapper.isVueInstance()).toBeTruthy();
  });
});
</script>

기본값은 .vue 가 테스트 파일로 인식되지 않으므로 Jest 설정을 변경합니다.

package.json(발췌)

"jest": {
  "testRegex": "(/__tests__/.*|(\\.|/)(spec))\\.(vue|ts)$"
}

Jest의 textRegex 의 기본값 (/__tests__/.*|(\\.|/)(test|spec))\\.[jt]sx?$ 를 *.spec.ts 와 *.spec.vue 가 해당하도록 변경했다.

이것으로 VSCode상의 에러도 런타임의 에러도 사라지고, 무사히 테스트할 수 있게 되었다.