JEST 테스트에서 글로벌 Vue.js 변수를 조롱하는 방법

JEST 테스트에서 글로벌 Vue.js 변수를 조롱하는 방법

앱 URL에 글로벌 속성/변수가 있습니다.

Vue.prototype.$apiUrls = {
  root: 'http://localhost:8080/',
  api: 'api/v1/'
  // etc.  
}

Axios의 요청에 따라 컴포넌트 내에서 사용합니다.

axios.get(`${this.$apiUrls.root}${this.$apiUrls.api}/users/`)

이제 내 컴포넌트의 코드를 테스트합니다.이것에 의해,axios이미 에러가 발생하고 있습니다만, 다음의 에러가 표시됩니다.

TypeError: Cannot read property '$apiUrls' of undefined

각 테스트 내 및/또는 JEST의 셋업 파일에 이 속성을 정의/또는 둘 다)에서 이 속성을 정의/매킹하려고 했습니다.

global.$apiUrls = {...}
// or
Vue.prototype.$apiUrls = {...}
// or
Object.defineProperties(Vue.prototype, {$apiUrls: {...}})

나도 비웃어봤어window또는this(네, 그건 바보같은 소리입니다) 하지만 성공하지 못했습니다.-아직도 그 오류를 받고 있습니다.- 도와주세요.

이를 달성하는 데는 두 가지 방법이 있습니다.1개는 를 사용하고 있습니다.Config@Aldarund에서 설명한 옵션입니다.여기서 보실 수 있습니다.

Jest를 사용하는 경우, 이 작업을 다음 URL에서 수행하는 것을 권장합니다.jest.init.js파일:

import { config } from '@vue/test-utils'

config.mocks['$apiUrls'] = {
  'some/endpoint'
}

그런 다음 이것을 에 추가합니다.jest의 섹션package.json:

"setupFiles": [
  "<rootDir>/jest.init.js"
]

이제 그것은 세계적으로 조롱받고 있다.테스트별로 이 작업을 수행하려면mocks마운트 옵션:

const wrapper = shallowMount(Foo, {
  mocks: {
    $apiUrls: 'some/endpoint'
  }
})

이게 도움이 됐으면 좋겠네요!

Vue 컴포넌트를 테스트하는 방법에 대한 간단한 가이드 컬렉션을 여기서 정리합니다.개발 중이지만 Vue 컴포넌트 테스트와 관련된 기타 사항에 대해 도움이 필요하면 언제든지 문제를 제기하십시오.

(2020년에는) 위의 답이 더 이상 통하지 않는 것 같다.

다음과 같은 이점이 있습니다.

vue-test-utils 1.x.x (Vue 2)의 경우

1. 새 파일을 만들고 이름을 지정합니다. jest.init.js
2. 다음 내용을 입력합니다.

import { config } from "@vue/test-utils";
config.mocks["yourGlobalProperty"] = label => label; //you can replace it with your own mock

3. 이 항목을 에 추가합니다.jest.config.js(실제로 「rootDir」라고 써, 아무것도 실제 패스로 치환하지 말아 주세요)

module.exports = {
  setupFiles: ["<rootDir>/jest.init.js"]
}

이러한 파일은 joke가 유닛테스트를 실행하기 전에만 실행됩니다.

Import 하는 것에 주의해 주세요.{config}기본 내보내기가 아닙니다.디폴트가 왜 작동하지 않았는지 모르겠어요.vue test utils 문서에서도 기본 내보내기는 더 이상 Import되지 않습니다.

또한 이전 버전에서 가져오려고 하지 않는지 확인하십시오.vue-test-utils패키지.(새로운 것은)@vue/test-utils)

@vue/test-utils 2.x.x(vue-test-utils-next)(Vue 3)의 경우

위의 1.x.x와 같은 절차를 따르되, 2단계에서는 이를 대신 수행합니다.

import { config } from "@vue/test-utils"; //2.0.0-beta.5
config.global.mocks = {
  yourGlobalProperty: label => label
};

vue-test-utils 베타 15 이상에서 수행할 수 있습니다.

여기 문서

예를 들어 다음과 같습니다.

import VueTestUtils from '@vue/test-utils'

VueTestUtils.config.mocks['$apiUrls'] = {
  ...
}

언급URL : https://stackoverflow.com/questions/51214631/how-to-mock-global-vue-js-variable-in-jest-test