programing

Jest로 vuex 모의, 유명한 getters

prostudy 2022. 7. 28. 22:02
반응형

Jest로 vuex 모의, 유명한 getters

vuex를 사용하는 컴포넌트를 테스트하는 방법에 매우 집착하고 있습니다.

실행하려는 테스트는 단순히 편집을 true로 설정하기 위해 실행할 때 테스트하는 것입니다.방법은 다음과 같습니다.

  editMovie: function(movie){
      console.log(movie)
       this._originalMovie = Object.assign({}, movie);
       movie.edit = true;
  }, 

몇 가지 방법 및 마운트 시 상점으로 디스패치합니다.

디스패치를 찾을 수 없다는 오류가 발생하여 https://vue-test-utils.vuejs.org/guides/using-with-vuex.html에 팔로우하여 다음과 같이 Mock 스토어에 추가하였습니다.

오류:

console.error node_moves/vuex/dist/vuex.common.common:899 [vuex]알 수 없는 getter: 무비

console.error node_modules/vue/dist/vue.runtime.common.dev.js:621 [Vue warn] :렌더 오류: "TypeError: 정의되지 않은 속성 '0'을 읽을 수 없습니다."

코드:

import { shallowMount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
//import Actions from '../../src/store/Actions'
import MoviesList from '@/components/MoviesList.vue'

const localVue = createLocalVue()

localVue.use(Vuex)

describe('MoviesList.vue', () => {
  let actions
  let store

  beforeEach(() => {
    actions = {
      getMovies: jest.fn(),
    }
    store = new Vuex.Store({
      actions
    })
  })

  it('Edit should be true', () => {
    const wrapper = shallowMount(MoviesList, { store, localVue })
    wrapper.setData({ 
      movies: { 0: {
          deleted:false,
          edit:false,
          name:"Full Metal Jacket",
          released_on:"1987",
      }}
    })
    console.log(wrapper.vm.movies[0])
    wrapper.vm.editMovie(wrapper.vm.movies[0])
    expect(wrapper.vm.movies[0].edit).toBe(true)
  })
}) 

언급URL : https://stackoverflow.com/questions/58285648/mock-vuex-with-jest-uknown-getters

반응형