如何在 vue 测试中更改 vuex getter 值？答案

【问题标题】：How to change vuex getter value in vue testing?如何在 vue 测试中更改 vuex getter 值？
【发布时间】：2019-09-15 10:46:01
【问题描述】：

我有一个简单的测试：

describe('App', () => {
    let store;
    beforeEach(() => {
        store = new Vuex.Store({
            modules: {
                auth: {
                    namespaced: true,
                    getters: {
                        isLoggedIn: () => true,
                    }
                }
            }
        });
    });

    test('App hides navbar when user is logged in', () => {
        const wrapper = shallowMount(App, { store, localVue });
        expect(wrapper.contains(Nav)).toBe(false);
// store.getters['auth/isLoggedIn'] = () => false; // Not possible
    });
});

但我无法更改 getter 值，并且在控制台中看到此错误：

TypeError: Cannot set property auth/isLoggedIn of # which has only a getter

如何在我的测试中设置 getter 值？

【问题讨论】：

标签： javascript vue.js jestjs vue-test-utils

【解决方案1】：

参考下面提到的代码。这就是您可以修改 getter 值的方式。

let oldValue = store.getters['auth/isLoggedIn']
console.log('oldValue', oldValue) // oldValue = true

expect(store.getters['auth/isLoggedIn']).toBe(true)

  store = {
    getters: {
      'auth/isLoggedIn': !oldValue
    }
  }

  let newValue = store.getters['auth/isLoggedIn']
  console.log('newValue', newValue)  //newValue = false

  expect(store.getters['auth/isLoggedIn']).toBe(false)

【讨论】：

【解决方案2】：

根据Vue-test-utils的文档

从商店导入吸气剂。例如

从'../../../src/components/Getters'导入Getters

放置 getter 而不是 App

const wrapper = shallowMount(App, { store, localVue });

希望这会有所帮助。

【讨论】：