0

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、うまくいくかどうかわかりませんか?

4

0 に答える 0