Vue 테스트 유틸리티의 "스텁된 하위 구성 요소"란 무엇입니까?

Vue 테스트 유틸리티의 "스텁된 하위 구성 요소"란 무엇입니까?

Vue 테스트 유틸리티에는 다음과 같은 API 메서드가 있습니다.

...를 삭제하다Wrapper마운트 및 렌더링된 Vue 구성 요소를 포함하지만 스터브 하위 구성 요소를 포함합니다.

Vue Test Utils 설명서 웹 사이트를 검색했지만 이러한 스터브된 하위 구성 요소의 동작에 대한 적절한 설명을 찾을 수 없었습니다.

1. 이 그루터기 자성분들은 정확히 어떤 건가요?
2. Vue 컴포넌트 라이프 사이클의 어느 부분을 거칩니까?
3. 그들의 행동을 미리 프로그램할 수 있는 방법이 있나요?

스터브드 차일드 컴포넌트란 정확히 어떤 것입니까?

스터브 자성분은 테스트 대상 컴포넌트에 의해 렌더링된 자성 컴포넌트를 대체하는 것입니다.

예를 들어,ParentComponent를 렌더링하는 컴포넌트ChildComponent:

const ParentComponent = {
  template: `
    <div>
      <button />
      <child-component />
    </div>
  `,
  components: {
    ChildComponent
  }
}

ChildComponent는 글로벌하게 등록된 컴포넌트를 렌더링하고 마운트되면 주입된 인스턴스 메서드를 호출합니다.

const ChildComponent = {
  template: `<span><another-component /></span>`,
  mounted() {
    this.$injectedMethod()
  }
}

만약 당신이 사용하는shallowMount탑재하다ParentComponentVue Test Utils는 다음 스탭을 렌더링합니다.ChildComponent원본을 대신하여ChildComponent. stub 컴포넌트에서는 다음 컴포넌트가 렌더링되지 않습니다.ChildComponent템플릿에는, 이 템플릿이 없습니다.mounted라이프 사이클 방식

전화하셨다면html에서ParentComponentwrapper에는 다음 출력이 표시됩니다.

const wrapper = shallowMount(ParentComponent)
wrapper.html() // <div><button /><child-component-stub /></div>

스터브는 다음과 같습니다.

const Stub = {
  props: originalComonent.props,
  render(h) {
    return h(tagName, this.$options._renderChildren)
  }
}

stub 컴포넌트는 원래 컴포넌트의 정보를 사용하여 작성되므로 원래 컴포넌트를 실렉터로 사용할 수 있습니다.

const wrapper = shallowMount(ParentComponent)
wrapper.find(ChildComponent).props()

Vue는 스터브 구성 요소를 렌더링하고 있다는 사실을 알지 못합니다.Vue 테스트 유틸리티는 Vue가 컴포넌트를 해결하려고 할 때 원래 컴포넌트가 아닌 스터브 컴포넌트로 해결되도록 설정합니다.

Vue 컴포넌트 라이프 사이클의 어느 부분을 거칩니까?

스텁은 Vue 라이프 사이클의 모든 부분을 통과합니다.

그들의 행동을 미리 프로그램할 수 있는 방법이 있나요?

네, 커스텀스텁을 생성하여stubs마운트 옵션:

const MyStub = {
  template: '<div />',
  methods: {
    someMethod() {}
  }
}

mount(TestComponent, {
  stubs: {
    'my-stub': MyStub
  }
})

스터브 구성 요소에 대한 자세한 내용은 이 Vue의 비공식 테스트 가이드를 참조하십시오.

https://lmiller1990.github.io/vue-testing-handbook/ #what-is-this-guide

요컨대:

스텁은 단순히 다른 사람을 대신하는 코드 조각입니다.

Vue Test Utils 정보에는 다음 정보도 포함되어 있습니다.shallow mount:

https://vue-test-utils.vuejs.org/guides/ #common-displays

Vue Test Utils에는 컨텍스트가 상당히 부족합니다.

언급URL : https://stackoverflow.com/questions/52962489/what-are-stubbed-child-components-in-vue-test-utils