Question

我是测试Vue应用程序的新手，我正在尝试使用Vue-test-utils包在一个Vue组件中测试 props 。我想知道是否要创建 propsData 是正确的方法，还是有另一种方法，在这种情况下，最好成功地测试该组件

Template.spec.js

import { mount } from '@vue/test-utils';
import Template from '~/components/Template.vue';

describe('Template', () => {
  const wrapper = mount(Template, {
    propsData: {
      image: 'https://loremflickr.com/640/480/dog',
      location: 'London',
      jobPosition: 'Developer',
      hashtags: ['es6', 'vue']
    }
  });

  it('should render member props', () => {
    expect(wrapper.props().image).toMatch('https://loremflickr.com/640/480/dog');
    expect(wrapper.props().location).toMatch('London');
    expect(wrapper.props().jobPosition).toMatch('Developer');
    expect(wrapper.props().hashtags).toEqual(['es6', 'vue']);
  });
});

Template.vue

<template>
  <div class="template">
    <img
      :src="image"
    >
    <span>{{ location }}</span>
    <span>{{ jobPosition }}</span>
  </div>
</template>
<script>
export default {
  name: 'template',
  props: {
    image: {
      type: String,
      required: true
    },
    location: {
      type: String,
      required: true
    },
    jobPosition: {
      type: String,
      required: true
    },
  }
};
</script>

Answer 1

您不能测试道具值，但可以根据道具设置来测试组件的行为。例如，您的组件可以设置一些类或在设置了一些道具的情况下显示某些元素

例如

describe( 'BaseButton.vue icon rendering', () => {
    const icon = 'laptop';
    const wrapper = shallowMount( BaseButton, {
        propsData : {
            icon : icon,
        },
    } );
    const wrapperWithoutIcon = shallowMount( BaseButton );

    it( 'renders icon component', () => {
        expect( wrapper.contains( FontAwesomeIcon ) ).toBe( true );
    } );
    
    it( 'sets a right classname', () => {
        expect( wrapper.classes() ).toContain('--is-iconed');
    } );

    it( 'doesn\'t render an icon when icon prop is not passed', () => {
        expect( wrapperWithoutIcon.contains( FontAwesomeIcon ) ).toBe( false );
    } );

    it( 'sets right prop for icon component', () => {
        const iconComponent = wrapper.find( FontAwesomeIcon );

        expect( iconComponent.attributes('icon') ).toMatch( icon );
    } );
} );

Answer 2

您的private void formrefresh() { FoodItem foodItem = new FoodItem(); foodItem.ShowDialog(); this.Close(); } private void BrowsImage_Click(object sender, EventArgs e) { GetFoodImage image = new GetFoodImage(); var imagePath = image.GetImage(); this.foodImage.Image = new Bitmap(imagePath); this.imagePath.Text = imagePath; } public string GetImage(FoodItem foodItem) { OpenFileDialog BrowseImage = new OpenFileDialog(); BrowseImage.Filter = "Image Files(*.jpg; *.gif;)|*.jpg; *.gif"; if (BrowseImage.ShowDialog() == DialogResult.OK) { return BrowseImage.FileName; } return ""; }很好，您可以设置假道具。您可以检查这些假道具是否已呈现到HTML中。

这里是一个例子：

Template.spec.js

这样，您正在检查代码是否可以将道具呈现为HTML

使用Vue-test-utils测试Vue js道具组件

2 个答案: