vue.js - 如何测试组件触发“点击”更新数据属性？

Question

测试我的方法是否被调用的正确方法是什么？下面是一个简单的例子：

我的组件

<template>
  <button ref="btn1" @click="doSomething('btn1')"></button>
</template>

<script>
export default {
  data() {
    return {
      btn1: false,
    };
  },
  methods: {
    doSomething(btnId) {
      this[btnId] = true;
    },
  },
};
</script>

我的测试

test('btn1 was clicked', async () => {
  const btn1 = wrapper.findComponent({ ref: 'btn1' })
  await btn1.trigger('click')
  expect(wrapper.vm.btn1).toBeTruthy()
})

问题wrapper.vm.btn1总是假的。我在这里做错了什么？

标签： vue.jsvuejs2jestjsvue-test-utils

Answer 1

尝试更改this[btnId] = true;为this.btnId = true;