使用 Vue-test-utils 测试 Vue js props 组件答案

【问题标题】：test Vue js props component with Vue-test-utils使用 Vue-test-utils 测试 Vue js props 组件
【发布时间】：2019-07-16 21:20:19
【问题描述】：

我是测试 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']);
  });
});

模板.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>

【问题讨论】：

在我看来，您正在测试的只是mount() 为您的组件提供了道具。我不清楚实际问题是什么。如果你想测试 props 是否被渲染到浏览器（it('should render member props'），那感觉更像是一个 e2e 测试。

标签： vue.js vuejs2 jestjs vue-component vue-test-utils

【解决方案1】：

您可以测试的不是 props 值，而是组件的行为取决于 props 集。例如，如果设置了某些 prop，您的组件可以设置一些类或显示一些元素

例如

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 );
    } );
} );

【讨论】：

【解决方案2】：

您的Template.spec.js 很好，您可以在其中设置假道具。您可以检查这些假道具是否被渲染到 HTML 中。

这是一个例子：

it('title render properly thru passed prop', () => {
    const wrapper = shallowMount(app, {
      propsData: {
        data: {
          title: 'here are the title'
        }
      },
    })
    expect(wrapper.text()).toContain('here are the title')
})

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

【讨论】：