https://vue-test-utils.vuejs.org/guides/#testing-key-mouse-and-other-dom-eventsを調べて、Jest と vue-test- を組み合わせてテストを作成する方法を学びました。ユーティリティ。ただし、これらの例はすべてshallowMount
コンポーネントをマウントする場所を使用していますが、GUI テストを使用して実際のコンポーネントをテストするので、それは避けたいと思います。
ただし、コンポーネントなしでこれを行うには問題があります。vue-test-utils の例ではshallowMount
、ストアを注入するために使用していますが、そうしていないため、ストアにアクセスできません。つまり、テスト時に状態、ゲッターなどはすべて未定義です。
私の店のテストファイルmyStore.spec.js
:
import { createLocalVue } from '@vue/test-utils';
import myStore from './myStore';
import Vuex from 'vuex';
const localVue = createLocalVue();
localVue.use(Vuex);
describe('myStore tests', () => {
let actions;
let getters;
let store;
beforeEach(() => {
actions = {
setInUse: jest.fn(),
};
getters = {
isInUse: () => false,
};
store = new Vuex.Store({
modules: {
myStore: {
state: {
isInUse: false,
},
actions,
getters: myStore.getters,
},
},
});
});
it('example test', () => {
actions.setInUse(true);
expect(getters.isInUse(state)).toBeTruthy();
});
});
このテストを実行したときのエラーの 1 つは次のとおりstate is not defined
です。
どこが間違っていますか?テストで自分のストアにアクセスするにはどうすればよいですか? 理想的には、テスト ストアを からインポートしたものと同じに設定したいのですがmyStore
、うまくいくかどうかわかりませんか?