VueJS에서 Vuex 저장소를 모의하는 방법 parentComponent 테스트 유틸리티

VueJS에서 Vuex 저장소를 모의하는 방법 parentComponent 테스트 유틸리티

사용하고 있다Jest와 함께vue-test-utils자 컴포넌트가 다음 컴포넌트에 반응하는지 여부를 테스트하려고 합니다.$emit이벤트를 표시합니다.

VueJS 테스트 유틸리티 라이브러리는parentComponent구성 요소를 마운트/마운트할 때 전달되는 옵션.

시뮬레이션된 Vuex 스토어를 사용하여 컴포넌트를 인스턴스화해도 상위 컴포넌트는 정상적으로 동작합니다.

TypeError: 정의되지 않은 속성 '상태'를 읽을 수 없습니다.

에서this.$store.state.something.here상위 컴포넌트에 코드 조각이 포함되어 있습니다.

어떻게 Vuex 가게를 비웃을 수 있죠?

컴포넌트 마운트는 다음과 같습니다.

const wrapper = shallowMount(ChildComponent, {
  store,
  localVue,
  parentComponent: ParentComponent,
  mocks: {
    $t: msg => msg,
  },
});

어떻게 해결할지 생각나는 거 없어?

OP 질문에 대한 완전한 답변은 아닐지 모르지만, 지난 2시간 동안 디버깅을 하다가 드디어 나의 문제를 발견했으므로, 앞으로 누군가를 돕기 위해 여기에 글을 올리고 싶습니다.

다음 컴포넌트를 시뮬레이트하여 마운트하려고 했습니다.

<template>
<div test="object-list-div">
  <h1 test="component-title">{{ objectName }}</h1>
  <table class="table">
    <thead>
        <tr test="table-row-title">
            <th scope="col" test="table-column-title" v-for="(value, name, index) in objectData[0]" :key="index">{{ name }}</th>
        </tr>
    </thead>
    <tbody>
      <tr test="table-row-data" v-for="(ivalue, iname, i) in objectData" :key="i">
        <td test="table-cell-data" v-for="(jvalue, jname, j) in ivalue" :key="j">{{ jvalue }}</td>
      </tr>
    </tbody>
  </table>
</div>

export default  {

    props: [
        'objectName',
        'objectData'
    ],
    computed: {
      visibleColums() {
        return this.$store.state.Config_ShowColumn;
      }
    }
}

다음 래퍼 코드 포함

 wrapper = shallowMount(ObjectList, {
    mocks: {
      $store: {
        state: {
          Config_ShowColumn: [
            "Field1",
            "Field2",
            "Field3",
            "Field4",
            "Field5",
          ]
        }
      }
    }
  });

OP 에러가 발생했지만, 제 경우 컴포넌트는 작성 시점에서 2개의 Propos를 상정하고 있었습니다.이거 안 받아서 막혔어요.

이것으로 동작합니다.

import { shallowMount } from "@vue/test-utils";
import { expect } from "chai";
import ObjectList from "@/components/Object-List.vue";  

wrapper = shallowMount(ObjectList, {
    propsData: {
      objectName: "Ticket",
      objectData: [
        {
          Field1: "Field1",
          Field2: "Field2",
          Field3: "Field3",
          Field4: "Field4",
          Field5: "Field5",
        },
      ]
    }, 
    mocks: {
      $store: {
        state: {
          Config_ShowColumn: [
            "Field1",
            "Field2",
            "Field3",
            "Field4",
            "Field5",
          ]
        }
      }
    }
  });

도움이 됐으면 좋겠는데

리처드가 제안한 해결책을 시도했지만, 그의 추측이 맞았음에도 불구하고 큰 성공을 거두지 못했다.

솔루션은 상상했던 것보다 훨씬 단순했고, Vuex의 인스턴스화를 중단했습니다.저장하여 조롱받는 제품만 제공$store에서vue-test-utils config다음과 같이 합니다.

import { createLocalVue, shallowMount, config } from '@vue/test-utils';

config.mocks.$store = {
  state: {
    user: {
      sexy: true
    },
  },
};

실제 데이터를 조롱하기만 하면 되기 때문에 Vuex의 실제 인스턴스를 사용할 필요가 없었습니다.이 작업은 완벽하게 수행되었습니다.

모의 매장은 어떻게 만들고 있습니까?뭐랄까...

const storeOptions = {
  state: {...},
  getters: {...},
  mutations: {...}
}
const mockStore = new Vuex.Store(storeOptions)

부터this.$store정의되어 있지 않습니다.아마 옵션오브젝트를 shallowMount로 전달하고 있을 겁니다.

언급URL : https://stackoverflow.com/questions/52477645/how-to-mock-a-vuex-store-in-vuejs-test-utils-parentcomponent