Vuex를 사용할 때 Vuejs 컴포넌트를 테스트하는 방법

Vuex를 사용할 때 Vuejs 컴포넌트를 테스트하는 방법

더 큰 어플리케이션의 vuejs 컴포넌트에 대한 유닛 테스트를 작성하고 있습니다.애플리케이션 상태는 모두 vuex 스토어에 있기 때문에 거의 모든 컴포넌트가 vuex에서 데이터를 가져옵니다.

이에 대한 쓰기 단위 테스트의 작업 예를 찾을 수 없습니다.찾았다

Evan You가 말하는 곳:

구성 요소를 개별적으로 테스트할 때 저장소 옵션을 사용하여 시뮬레이션된 저장소를 구성 요소에 직접 주입할 수 있습니다.

그러나 이러한 구성 요소를 테스트하는 좋은 예를 찾을 수 없습니다.여러 가지 방법을 시도해 봤어요.아래가 내가 본 유일한 방법이다.스택오버플로우 질의응답

기본적으로는,

test.vue:

 <template>
    <div>test<div>
 </template>
 <script>
 <script>
    export default {
        name: 'test',
        computed: {
            name(){
                return this.$store.state.test;
            }
        }
    }
  </script>

test.spec.discloss.discloses

import ...

const store = new Vuex.Store({
  state: {
    test: 3
  }
});
describe('test.vue', () => {

  it('should get test from store', () => {

    const parent = new Vue({
      template: '<div><test ref="test"></test></div>',
      components: { test },
      store: store
    }).$mount();

    expect(parent.$refs.test.name).toBe(3);
  });
}

이 예에서는, 「ref」가 없으면 동작하지 않습니다.

이게 정말 올바른 방법인가요?템플릿에 스트링으로 소품을 넣어야 하기 때문에 금방 지저분해질 것 같습니다.

Evan의 인용문은 스토어를 하위 구성요소에 직접 추가할 수 있음을 암시하는 것 같습니다(예시와 같은 상위 구성요소는 아님).

어떻게 하는 거야?

답은 사실 매우 간단하지만 현재 문서화되어 있지 않습니다.

  const propsData = { prop: { id: 1} };
  const store = new Vuex.Store({state, getters});

  const Constructor = Vue.extend(importedComponent);
  const component = new Constructor({ propsData, store });

컨스트럭터에게 전달된 스토어에 주목해 주세요.proposData는 현재 문서화되어 있지만 "스토어" 옵션은 문서화되어 있지 않습니다.

또한 Larabel을 사용하는 경우 실행 중인 웹 팩 버전에 이상한 문제가 있습니다.

그

[vuex]는 Vue.use(Vuex)에 문의해야 합니다.

larabel-elixir-webpack-official을 사용하여 오류가 발생했습니다.
수정한 경우:

npm install webpack@2.1.0-1802.22 --save-dev

이 https://github.com/JeffreyWay/laravel-elixir-webpack-official/issues/17의 경우

Vuex를 포함한 테스트에서는

[vuex]는 Vue.use(Vuex)에 문의해야 합니다.

Vue.use(Vuex)가 있는 경우에도

언급URL : https://stackoverflow.com/questions/43495306/how-do-you-test-vuejs-components-when-using-vuex