Vue에서 namesthed mapAction을 테스트하는 방법

Vue에서 namesthed mapAction을 테스트하는 방법

내 Vue 2.6 앱에는 Vuex 스토어가 있는데, 그 중 하나의 모듈은 다음과 같습니다.

 //books.js

 export default {
  state: {
    books: null
  },
  mutations: {
    SET_BOOKS(state, books) {
      state.books = books;
    },
  },
  actions: {
    setBooks: async function ({ commit }) {
      //api call
      commit('SET_BOOKS', books);
    }
  },
  namespaced: true
};

콜하는 컴포넌트를 테스트하고 싶다.setBooks액션.사용하고 있다mapActions액세스 할 수 있습니다.관련 코드는 다음과 같습니다.

 //Books.vue

 methods: {
    ...mapActions("books", ["setBooks"]),
    }
  },
  created: async function() {
    await this.setBooks();
  }

문제는 테스트에서 액션을 찾을 수 없다는 것입니다.

import { shallowMount } from '@vue/test-utils';
import Books from '@/views/Books';
import Vuex from 'vuex';
import flushPromises from 'flush-promises';
import { createLocalVue } from '@vue/test-utils'

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

describe('Books', () => {

  let actions;
  let store;
  let wrapper;
  beforeEach(() => {
    store = new Vuex.Store({
      state: {
        books: {
          books: null
        }
      },
      actions: {
        setBooks: jest.fn()
      }
    });
    wrapper = shallowMount(Books, { store, localVue })
  });

  it("renders the books", async () => {
    await flushPromises();
    expect(actions.setBooks).toHaveBeenCalled();
  });
});

에러가 발생하다[vuex] module namespace not found in mapActions(): books/

테스트에서 액션코드 네임스페이스를 사용하여 다음을 수행하려고 할 수 있습니다.

actions: {
    books: {
        setBooks: jest.fn()
    }
}

나는 이해한다TypeError: Cannot read property 'setBooks' of undefined

제발 도와주세요, 고마워요!

vue-test-utils 문서에는 모듈을 사용한 테스트의 예가 포함되어 있습니다.

각 변경 전:

beforeEach(() => {
  actions = { setBooks: jest.fn() }
  store = new Vuex.Store({
    modules: {
      books: {
        state: { books: null },
        actions
      }
    }
  })
...
})

테스트가 액션을 호출합니다.setBooks는 원래 코드에서는 단순히 선언되었을 뿐 스토어 작성에 사용되지 않았습니다.

언급URL : https://stackoverflow.com/questions/62394292/how-to-test-namespaced-mapaction-in-vue