Vue 템플릿과 스크립트에서 별칭을 사용하여 vue-jest 구성을 매핑하는 방법이 있나요?

Question

종속성: "@vue/cli-plugin-unit-jest": "^4.5.13", "@vue/test-utils": "^1.2.1", "vue - 농담": "^3.0.7"

vue.config.js에 별칭(예: "foo")을 설정하는 애플리케이션이 있습니다.

module.exports = {
  chainWebpack: (구성) =>
    //프로젝트 이름을 별칭으로 설정
    config.resolve.alias.set('foo', __dirname);
  },
};

HTML 태그의 import 문과 src 속성의 경우...

main.js에서:

...
'foo/src/comComponents/core/App'에서 앱을 가져옵니다.
...

../src/core/App/index.vue:

Answer 1

SFC의 URL 구문 분석

vue-jest无法解析SFC中顶级块标签的src URL，因此您需要在src/components/core/App/index.vue에서 앨리어싱되지 않은 상대 경로 사용:

으아악

템플릿 콘텐츠의 URL 구문 분석

vue-jest使用@vue/component-compiler-utils编译模板，但URL解析需要transformAssetUrls选项。 vue-jest 3.x不支持向@vue/component-compiler-utils传递选项，但在4.0.0-rc.1中通过templateCompiler.transformAssetUrls구성구현.

URL 구문 분석이 활성화된 경우에도 Vue CLI는 jest를 이미지 jest以返回空字符串以获取require的媒体，包括图像。如果您的测试需要与正常解析的URL一起在生产环境中工作，您将需要一个模仿url-loader를 포함하여 require의 미디어를 가져오기 위해 빈 문자열을 반환합니다. 테스트가 일반적으로 확인된 URL을 사용하여 프로덕션에서 작동해야 하는 경우 URL 로더. Vue CLI 구성 로더는 4KB보다 큰 경우 구문 분석된 파일 이름을 반환하고, 그렇지 않으면 base64 데이터 URL을 반환합니다.

URL 구문 분석을 활성화하려면:

업그레이드
1. 4:

   으아악 vue-jest

나중에 아래에서 사용할 사용자 정의
2. 를 위해 다음 파일을 만듭니다.

   으아악 my-jest-url-loader

Vue CLI의 기본 Jest 사전 설정을 실수로 덮어쓰는 것을 방지하려면 병합 도구(예:
3. lodash.merge

   )를 사용하여 jest.config.js에 사용자 정의 구성을 삽입하세요. lodash.merge）在jest.config.js

4. Jest global

   에 구성을 추가하고 templateCompiler.transformAssetUrls 코드를 설정합니다. >. vue-jest配置，设置templateCompiler.transformAssetUrls

병합 사전 설정의 transform 속성을 ​​수정하고
5. converter를 사용하여 이미지를 처리합니다. 충돌을 피하기 위해서는 기본 Jest 사전 설정에서 다른 이미지 변환기를 제거해야 합니다.

   으아악 transform属性，使用我们的my-jest-url-loader

GitHub 데모