Vue 유닛 테스트 - vue-test-utils 마운트를 사용할 때 Import된 서비스를 조롱합니다.

Vue 유닛 테스트 - vue-test-utils 마운트를 사용할 때 Import된 서비스를 조롱합니다.

vue-test-utils에서 mount()를 사용하고 있습니다.유닛 테스트에서 조롱해야 할 서비스를 Import하는 컴포넌트가 있습니다.

mount()에는 mocks 옵션이 있는 것을 알 수 있습니다만, 주입된 서비스의 시나리오에 대한 guides, common-tips, 모의 주입에서 제시된 예를 추측하려고 해도 이해할 수 없습니다.

mount(Component, {
  mocks: {
    ...?
  }
})

컴포넌트는 플레인 JS인 서비스를 Import하기만 하면 됩니다.

import DataService from '../services/data.service'

여기에 자세히 설명되어 있는 주입식 로더를 사용하여 작동시킬 수 있습니다. Mocks로 테스트

동작하는 코드

const MyComponentInjector = require('!!vue-loader?inject!./MyComponent.vue')
const mockedServices = {
  '../services/data.service': {
    checkAll: () => { return Promise.resolve() }
  },
}
const MyComponentWithMocks = MyComponentInjector(mockedServices)

const wrapper = mount(MyComponentWithMocks, { store: mockStore, router })

mount(My Component, {mocks: ...}) 구문은 무엇입니까?

mount()에는 mocks 옵션이 있기 때문에 어떤 형태로든 discured Services를 전달할 수 없습니까?

mocks는 Vue 인스턴스를 나타냅니다.파일 의존성을 조롱하려고 하는 것은 다른 문제입니다.말씀하신 대로 한 가지 솔루션은 주입식 로더입니다.또 하나는 바벨 플러그 리와이어입니다.

확실히 해두죠mocks옵션에는 해당됩니다.

mocksVue 인스턴스에 속성을 추가합니다.

주사하는 앱이 있다면$route접속을 시도하는 컴포넌트가 있을 수 있습니다.this.$route.path:

...
  methods: {
    logPath() {
      console.log(this.$route.path)
    }
  } 
... 

하려고 하면mountVue 라우터를 설치하지 않으면 오류가 발생합니다.이 문제를 해결하려면mocks모의 주입을 위한 마운트 옵션$routeVue 인스턴스에 대한 개체:

const $route = { path: 'some/mock/value' }
mount(Component, {
  mocks: {
    $route
  }
})

언급URL : https://stackoverflow.com/questions/46553779/vue-unit-testing-mocking-imported-services-when-using-vue-test-utils-mount