vue 및 모멘트를 사용하여 Jasmine의 버튼 메서드에 인수를 전달할 수 없습니다.

vue 및 모멘트를 사용하여 Jasmine의 버튼 메서드에 인수를 전달할 수 없습니다.

유닛 테스트를 시도하고 있는 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');
 
});

메서드를 호출하고 모의 파라미터를 전달하여 메서드를 테스트하려면 어떻게 해야 합니까?모멘트 js도 Import 할 수 있나요?

날짜가 올바른 형식으로 렌더링되었는지 테스트하려면:

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')

컴포넌트 메서드를 직접 테스트하려면 래퍼 속성을 통해 메서드에 액세스합니다.

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

애당초 그곳에서는 방법을 사용하지 않는 것이 좋습니다.대신 계산된 속성을 사용해야 합니다.

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" />

그런 다음 표시 날짜 성분 내에서 이전에 제안된 논리를 사용할 수 있습니다.계산된 속성과 메서드의 강력한 차이점에 유의하십시오.

코딩을 즐겨라!

언급URL : https://stackoverflow.com/questions/65316978/unable-to-pass-arguments-to-button-methods-in-jasmine-using-vue-and-moment