无法使用vue和moment将参数传递给茉莉花中的按钮方法

Question

我有一个 Vue 应用程序，我正在尝试使用 jasmine/karma 进行单元测试。下面是组件中的代码：

从数据库中使用 v-for=(data,index) 后，我在模板中设置 data.date：

<p class="date">
  {{ dateFilter(data.date) }}
</p>

现在我可以测试给定数据的格式是否正确。我目前在规格文件中有这样的东西：

import { mount } from '@vue/test-utils';
import moment from 'moment'

it('should call method', () => {
  const selector = wrapper.find('date');
 
});

如何调用该方法并传递模拟参数来测试该方法？我们也可以导入moment js吗？

Answer 1

你一开始就不应该在那里使用方法。您应该使用 computed property 而不是

computed: {
    dateFilter() {
      return moment.unix(this.data.date).utc().format("HH:mm a");
    },
}

在模板中

 <p class="date">
      {{ dateFilter }}
 </p>

现在在测试中您可以更改 data.date 的值（我猜您将其作为道具传递）

import { mount } from '@vue/test-utils';
import moment from 'moment'

const wrapper = mount(YourComponent)


 it('should call method', () => {

      const localThis = { date: <date-here> }
      expect(wrapper.computed.numbers.call(localThis)).toBe(<experct-result-here>)
 
  });

更新

要“解决”需要传递参数的迭代元素的问题，Vue 方法是创建一个组件，例如。并将逻辑放入其中。它可以采用数据道具并像这样：

Parent.vue
<display-date v-for="(data,index)in allData" :key="data.id||index" :data-prop="data" />

然后在显示日期组件中，您可以使用之前建议的逻辑。请注意计算属性和方法之间的巨大差异。

享受编码吧！

Answer 2

测试日期是否以正确的格式呈现：

const wrapper = mount(MyComponent, {
  propsData: {
    // assuming component has `items` prop, used in:
    // <p class="date" v-for="data in items"> {{ dateFilter(data.date) }} </p>
    items: [
      {
        id: 100,
        date: new Date('2020-12-10T12:30:45-08:00') // 12:30pm GMT-8 === 4:30pm UTC
      }
    ]
  }
})

const dateEl = wrapper.find('.date') // find first dateElement with `date` class
expect(dateEl.text()).toEqual('16:30 pm')

直接测试组件方法，通过wrapper的vm property访问方法：

expect(wrapper.vm.dataFilter(new Date('2020-12-10T12:30:45-08:00'))).toEqual('16:30 pm')

无法使用vue和moment将参数传递给茉莉花中的按钮方法

Unable to pass arguments to button methods in jasmine using vue and moment

javascript

jasmine

karma-jasmine

vue.js

vuejs2