Vux with Jest - 이거.$store.getters.는 함수가 아닙니다.

Vux with Jest - 이거.$store.getters.는 함수가 아닙니다.

저는 Vue에서 설문 작성 작업을 하고 있으며, 사용자가 작성한 설문 질문은 Vuex에 커밋되어 있기 때문에 다음과 같이 나중에 검색할 수 있습니다.

computed: {
  inputs() {
    return this.$store.getters.questions(this.pageNumber);
  },
},

pageNumber컴포넌트가 받는 받침대입니다.inputs()는 일련의 질문을 반환합니다.이 모든 것이 화면에 올바른 질문을 렌더링하는 측면에서 효과가 있는 것처럼 보이지만, 저는 Jest 테스트에 어려움을 겪고 있습니다.

테스트하기 위해 아래와 같이 (일부 부품은 생략)게터(getter)로 가게를 조롱할 수 있으면 좋겠다고 생각했습니다.

const localVue = createLocalVue();
localVue.use(Vuex);

beforeEach(() => {
  state = {
    survey: {
      pages: [
        // pages objects
      ],
    },
  };

  getters = {
    questions: () => [
      { type: 'Radio', config: { label: 'Test label', options: [{ label: 'Test option label' }] }, validation: [] },
    ],
  };

  store = new Vuex.Store({
    state,
    getters,
  });
});

그러나 이로 인해 다음과 같은 오류가 발생합니다.

TypeError: this.$store.getters.questions is not a function

단, 게터에서 화살표 기능을 제거합니다.질문은 다음과 같습니다.

[vuex] getters should be function but "getters.questions" is [{"type":"Radio","config":{"label":"Test label","options":[{"label":"Test option label"}]},"validation":[]}].

그래서 제가 완전히 오해하고 있는 것 같아요.누가 저를 올바른 방향으로 안내해 주실 수 있나요?

스토어의 getter는 컴포넌트의 계산된 속성과 마찬가지로 함수를 사용하여 정의되지만 괄호 없이 속성으로 액세스됩니다.

다음 행이 지정됩니다.

return this.$store.getters.questions(this.pageNumber);

당신의 것이 될 것입니다.questionsgetter가 수신하는 함수를 반환하고 있습니다.pageNumber이것은 현재 테스트 게터에서 정의되고 있는 것이 아니라 어레이를 반환하는 것입니다.

따라서 대괄호를 사용하도록 호출을 변경해야 합니다.

return this.$store.getters.questions[this.pageNumber];

또는 getter가 함수를 반환해야 합니다.

getters = {
    questions: () => () => [
        { type: 'Radio', config: { label: 'Test label', options: [{ label: 'Test option label' }] }, validation: [] }
    ]
};

명확하게 하는 데 도움이 되는 경우는, 다음과 같습니다.

getters = {
    questions: function () {
        return function () {
            const questions = [
                { type: 'Radio', config: { label: 'Test label', options: [{ label: 'Test option label' }] }, validation: [] }
            ];

            return questions;
        };
    }
};

주의하세요, 저는 통과된 것을 완전히 무시하고 있습니다.pageNumber테스트 게터는 일련의 질문을 올바르게 반환하도록 하드 코드화되어 있을 것입니다.

이 getter의 비테스트 버전을 참조하는 것이 좋습니다.기능이 한층 더 향상되는 것을 알 수 있을 것입니다.

vue-test-utils 및 Jest에서 조롱된 스토어를 다음과 같이 대체하면 getter(특히 딥 네스트모듈 getter)를 쉽게 조롱할 수 있습니다.

어프로치 #1

store: new Vuex.Store({
    getters: {
        'top-level-module/nested-module-level-1/more-nested-module/dataItem': function () {
            return 'any fake data you want'
        }
    }
}),

이 소울레이션은 단순히 시뮬레이트된 getter에서 컴포넌트를 테스트하려는 경우(컴포넌트의 계산된 네스트된 스토어 모듈에서 값을 얻는 경우) 깊이 중첩된 스토어 오브젝트 모크를 쓰지 않아도 됩니다.원하는 가짜(!) 오브젝트를 모조게터로부터 돌려주세요.

테스트하지 않으면 매장 상태를 모의할 필요가 없습니다.

또한 이 테스트에서는 getter의 반환된 객체를 테스트하지 마십시오.별도의 전용 테스트에 추출합니다.

어프로치 #2

Vuex도 필요 없습니다.다음과 같이 vue-test-utils mock만 사용합니다.

mocks: {
    $store: {
        getters: {
            'top-level-module/nested-module-level-1/more-nested-module/dataItem': (function () {
                return 'any fake data you want'
            })()
        }
    }
},

vs 접근법 #1에서는 모의 getter를 IIE로 만들어야 모의 getter가 실행되므로 모의 getter는 Vuex와 같이 실행되지 않습니다.

질문 방법을 다음과 같이 getter에 적습니다.

    getters = {
        questions: (state) => (page_number)=>{ [
          { type: 'Radio', config: { label: 'Test 
               label', 
           options: [{ label: 'Test option label' }] 
           }, 
           validation: [] },
        ],
         }
      };

언급URL : https://stackoverflow.com/questions/52058067/vuex-with-jest-this-store-getters-gettername-is-not-a-function