Vue 单元测试：使用 @vue/test-utils 定义 propsData

在使用 @vue/test-utils 进行单元测试时，可以通过 'propsData' 选项来定义组件的 props 数据。

'propsData' 选项是一个对象，其中的属性名是组件的 props 名称，属性值是要传递给 props 的值。例如，假设有一个名为 'HelloWorld' 的组件，它有一个名为 'msg' 的 props：

// HelloWorld.vue
<template>
  <div>{{ msg }}</div>
</template>

<script>
export default {
  props: {
    msg: String
  }
}
</script>

在单元测试中，可以使用 'propsData' 来定义 props 的值：

import { shallowMount } from '@vue/test-utils';
import HelloWorld from '@/components/HelloWorld.vue';

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'Hello, World!';
    const wrapper = shallowMount(HelloWorld, {
      propsData: {
        msg: msg
      }
    });
    expect(wrapper.text()).toMatch(msg);
  });
});

在上述示例中，我们使用 'shallowMount' 函数来创建一个 HelloWorld 组件的包装器。在选项对象中，我们使用 'propsData' 来定义 'msg' 的值为 'Hello, World!'。然后，我们断言渲染的文本是否与我们定义的 props 值匹配。

通过使用 'propsData' 选项，我们可以在单元测试中灵活地定义组件的 props 数据，以验证组件在不同 props 值下的行为。