vue의 Jest 단위 테스트 위치

저는 vue와 jest로 테스트 주도 개발을 하는 것을 좋아합니다. 잠시 동안 이 작업을 수행한 후 단위 테스트가 구현 파일과 별개로 자체 디렉토리에 있다는 사실이 마음에 들지 않는다는 사실을 알게 되었습니다. 구성 요소에서 작업하려면 항상 이를 찾는 데 시간이 필요합니다. 다음 디렉토리 목록과 같이 테스트 파일을 구성 요소 및 자바 스크립트 파일 옆에 두지 않는 이유는 무엇입니까?

- components
    - HelloWorld.spec.js
    - HelloWorld.vue
    - Home.spec.js 
    - Home.vue
- utils

보시다시피 테스트 파일을 찾기가 매우 쉬우며 테스트의 명명 규칙(*.spec.js)으로 인해 테스트 파일과 일반 파일 사이에 혼동이 없습니다.

그렇다면 어떻게 이를 달성할 수 있을까요? 매우 간단합니다. jest의 testMatch 구성을 변경해야 합니다. vue-cli를 사용하여 프로젝트를 만들고 jest를 단위 테스트 프레임워크로 추가하면 프로젝트 루트에 jest 구성 파일이 생깁니다.

// jest.config.js
module.exports = {
  preset: '@vue/cli-plugin-unit-jest'
}

이 파일에 적절한 textMatch 항목을 추가하기만 하면 됩니다.

module.exports = {
  preset: '@vue/cli-plugin-unit-jest',
  testMatch: [
    "**/src/**/*.spec.[jt]s?(x)",
  ]
}

이제 jest를 실행하면 javascript 파일 옆에 있는 테스트 파일이 인식됩니다. 새로운 설정을 사용하면 jest가 tests/unit 디렉토리의 테스트를 무시하기 때문에 모든 테스트를 구성 요소 옆으로 이동해야 합니다.

이러한 설정을 찾는 방법은 무엇입니까?

jest config documentation 을 검토하여 이 설정에 대해 알아냈습니다. 또한 다음을 실행하여 초기 구성을 살펴보았습니다.

npx jest --showConfig

출력에서 초기 구성을 보았습니다.

 "testMatch": [
    "**/tests/unit/**/*.spec.[jt]s?(x)",
    "**/__tests__/*.[jt]s?(x)"
  ],

이것을 복사하고 src 디렉토리의 파일과 일치시키기 위해 첫 번째 패턴을 다시 작성했습니다. __tests__ 디렉토리를 사용하지 않기 때문에 테스트를 어디에 배치해야 하는지 혼동하지 않도록 이 줄을 삭제했습니다.