Vue 유닛 테스트:소품, vuex 스토어, 워처, 게터 등을 사용하여 복잡한 컴포넌트를 테스트하는 방법

Vue 유닛 테스트:소품, vuex 스토어, 워처, 게터 등을 사용하여 복잡한 컴포넌트를 테스트하는 방법

vue 앱의 유닛 테스트(Jest)에 대한 질문이 있습니다.아키텍처적인 질문이라고 생각합니다만, 구체적인 코드 예도 도움이 될 수 있습니다.

앱에서 다소 복잡한 vue 컴포넌트 설정을 스케치했습니다.그것들은 여전히 단순하지만 나는 그들이 상황을 설명하는 것을 도와야 한다고 생각한다.

(픽셀 이외의 데이터를 선호하는 사용자를 위한 PDF 첨부 파일: )

3개의 하위 컴포넌트가 있는 래퍼가 있습니다.

• 검색(지도에서 검색할 입력 필드)
• 목록(매장 목록, 지도에 마커로도 표시됨)
• 지도(Google 지도 자체)

이 테스트를 위해 몇 가지 유닛 테스트를 작성하고 싶은데 테스트 셋업이 너무 지루해 보여서 이 방법이 맞는지 의심됩니다.

구글 맵 API를 로드하는 방법부터 시작합니다.래퍼는 비동기적으로 로드하고 API 키를 설정합니다.구글 맵 API가 로드되면 바로 아이들에게 전달됩니다.

물론 지도는 실제로 마커를 로드, 생성 및 표시하기 시작합니다.google에 사용할 수 .new this.google.maps.Map()예를들면.

Map 컴포넌트의 몇 가지 메서드를 테스트하고 싶어도 실제 구글 오브젝트를 제공해야 합니다.그렇지 않으면 init 프로세스 전체가 init되기 때문입니다.mount()실패해서 지도를 만들 수 없어요

테스트에서 실제 구글 지도 API를 로드해야 하나요?아니면 맵을 마운트하지 않고 몇 가지 격리된 방법을 테스트할 수 있을까요?

게다가 map이 vuex 스토어에서 getter를 감시하고 있는 것을 알 수 있습니다.항상searchCoordinates내 vuex 스토어의 검색 변경에 의해 설정된 몇 가지 기능을 실행하고 싶다(예를 들어 내 맵을 새 검색 좌표로 중심화하거나 검색이 유효한 searchCoordinates를 반환하지 않은 경우 현재 위치 마커를 삭제한다).

이러한 컴포넌트간의 상호연결을 어떻게 분해할 수 있는가.그러나, 앱이 본래의 기능을 확실히 하고 있는 것을 보증할 수 있는, 훌륭하고 유익한 테스트를 작성할 수 있는 방법은 무엇인가?

테스트 내에서 vuex 스토어를 사용할 수 있다는 것을 알고 있습니다(vuex 테스트에 대한 중간 기사).하지만 여전히 앱 전체가 서로 연결되어 있기 때문에 실제 유닛 테스트(한 번에 작은 부분씩 테스트)는 불가능합니다.방탄 테스트를 실제로 작성하려면 Map뿐만 아니라 다른 컴포넌트 및 vuex 스토어를 실제 데이터로 마운트해야 할 것 같습니다.

다른 몇 가지 예를 들자면, 제가 어려움을 겪고 있는 분야입니다.

• 인마이mounted()나는 다음과 같은 행동에 찬성한다.this.$store.subscribeAction((action) => {...- 물론 $store는 제 테스트에서 정의되지 않았습니다.비웃을까요?
• 내가 말했듯이 나는 게터를 보고 있다.이는 다음과 같은 오류를 발생시킵니다.TypeError: Cannot use 'in' operator to search for 'searchCoordinates' in undefined모든 게터들도 비웃어야 하나요?그렇다면 테스트해야 할 것은 무엇입니까?모든 vuex를 비웃으면(~=가져가면) 테스트가 무용지물이 되는 것 같습니다.

하지만 내가 틀렸나 봐.또, 유닛 테스트에 익숙하지 않기 때문에, 힌트라도 주시면 감사하겠습니다.잘 부탁드립니다.누군가 가치 있는 조언을 해주길 바란다.이러한 예(Vue.js와 같은 서적에서조차)는 항상 매우 단순하고 이해하기 쉬운 예시로 요약되지만, 다른 한편으로 실제 어플리케이션을 반영하지는 않습니다.

건배.

----- 편집:

나는.needs more focus누군가의 투표를 하다그래서 저는 간단하고 작은 질문을 요약하려고 합니다.

질문의 개요

1. 더 크고 복잡한 vue 애플리케이션을 테스트하는 방법에 대한 일반적인 의견을 가진 사람이 있습니까?
2. 구글 맵을 사용하여 컴포넌트(또는 서드파티 코드에 크게 의존하는 컴포넌트)를 테스트할 수 있는 방법이 있습니까?
3. 이런 경우, 구매자, 매장, 행동을 조롱하는 것이 좋은 생각일까요?(의심하고 있습니다).
4. vuex 스토어에서 감시된 속성을 테스트하기 위해 이 스레드에서 다음과 같이 읽었습니다.mapState조롱당해야 한다.(내 경우엔 아마 내 집사람들일 거야)내 경우, 저 getters를 움직이는게 말이 되나요?
5. 테스트된 컴포넌트에서 가능한 한 많은 것을 단순화하는 것이 가장 좋은 방법입니까(예를 들어 몇 가지 메서드를 재정의하기 시작했는데, 이 메서드(Google 맵 시작 포함)가 테스트 시작 및 실행에만 실패하였습니다.

const initMapMock = jest.fn();
const initMarkersMock = jest.fn();
...
const wrapper = shallowMount(Map, {
    methods: {
        initMap: initMapMock, // replace initMap(), which needs google map API
        initMarkers: initMarkersMock,
      },
    ...

이해 하셨나요?

이 질문에 대해 자세히 조사한 결과, 한 가지 깨달은 것이 있습니다.상기처럼 복잡한 상황이라면 유닛 테스트는 아마 이 문제에 적합한 도구가 아닐 것입니다.

이 경우end to end testing라고도 불린다integration testing그 일에 훨씬 더 적합할 것이다.

왜냐하면 제가 실제로 테스트하고 싶은 것은 모든 다른 컴포넌트가 올바르게 반응한다는 것입니다. 만약 어떤 것이 변경되거나 트리거되는 등의 상황이 발생한다면, 저는 전체적인 그림을 볼 필요가 있습니다.

예시로 돌아가면 검색 입력에 변경 등이 등록되면 맵이 변경되는 것을 확인할 수 있습니다.

브라우저를 하여 몇 했습니다.googles puppeteer예를 들어 웹 페이지를 열고 검색 쿼리를 입력한 다음 지도에서 신뢰할 수 있는 변경 사항을 DOM에서 검색합니다.

유감스럽게도 예산상의 제약으로 인해 이 테스트에 대해 자세히 설명할 시간은 없었지만, 어떻게 대처해야 할지 알 수 있었습니다.

가게 등을 조롱하는 저의 초기 아이디어는 유닛 테스트에 따라 앱의 다른 부분과 유사한 큰 모형을 만드는 것 외에는 아무것도 아닌 많은 작업이 필요하기 때문에 그렇게 하는 것은 완전히 바보 같은 짓입니다.연동 테스트에서는 이미 구축되어 있는 앱을 테스트에 사용하고 있습니다만, 모든 것을 동시에 테스트할 수 있는 장점이 있습니다.

저는 개인적으로 통합 테스트가 유닛 테스트보다 훨씬 더 강력하다고 생각합니다.왜냐하면 통합 테스트는 개발자가 쉽게 파악할 수 없는 어플리케이션 부분을 비추기 때문에 어플리케이션의 한 부분이 변경되고 다른 부분이 원하는 대로 작동하지 않으면 오류를 발생시키기 때문입니다.

만약 누군가가 더 추가할 것이 있다면, 나는 여전히 그 문제에 대한 의견을 듣는 것이 매우 기쁘다.

건배.

언급URL : https://stackoverflow.com/questions/58922748/vue-unit-testing-how-to-test-complex-components-with-props-vuex-store-watcher