组件无法访问测试商店中定义的操作（Vue Test Utils）

Question

根据 Vue Test Utils 的 docs 我在测试中创建了一个测试商店（复制我的真实商店）：

里面有这个动作：

actions: {
  updatePowerSelectedAction(
    { commit }: ActionContext<State, RootState>,
    val: number
  ) {
    commit('UPDATE_POWER_SELECTED', val);
  },
},

...单击按钮时被测试的组件调用：

模板：

<button v-for="(power, i) in powers" :key="i" @click="comparePower(power)" />

JS:

function comparePower(val: string) {
  updatePowerSelectedAction(val);
  ...
}

我可以看到组件已正确加载，但是当通过 await wrapper.findAll('.button')[0].trigger('click'); 单击按钮时它无法调用操作。

没有错误消息，只是没有调用操作。为什么不呢？

Answer 1

在您的 BattlePowers 中添加一个名为 powerbutton 的 class 以使该按钮独一无二：

  <button
    v-for="(power, i) in powers" :key="i" 
    @click="comparePower(power)"
    class="button powerbutton"
  >
    {{ power }}
  </button>

然后在测试文件中 battle-powers.spec.ts 导入全局存储而不是在测试文件中创建新的，因为当您模拟按钮单击时此全局存储会受到影响：

import { shallowMount } from '@vue/test-utils';
import BattlePowers from '@/views/battle/battle-powers.vue';
import store from '@/store'

describe('BattlePowers', () => {
  it('updates store variable powerSelected with power clicked by user', async () => {
    const wrapper = shallowMount(BattlePowers, {});
    await wrapper.findAll('.powerbutton')[1].trigger('click');
    expect(store.getters['powerSelected']).toBe("strength");
  });
});

组件无法访问测试商店中定义的操作（Vue Test Utils）

Component can't access action defined in test store (Vue Test Utils)

vue.js

vue-test-utils

vuejs3