将数据传递给组件

¥Passing Data to Components

Vue Test Utils 提供了多种在组件上设置数据和 props 的方法，使你可以在不同场景下全面测试组件的行为。

¥Vue Test Utils provides several ways to set data and props on a component, to allow you to fully test the component's behavior in different scenarios.

在本节中，我们将探讨 data 和 props 挂载选项，以及 VueWrapper.setProps() 来动态更新组件接收的 props。

¥In this section, we explore the data and props mounting options, as well as VueWrapper.setProps() to dynamically update the props a component receives.

密码组件

¥The Password Component

我们将通过构建 <Password> 组件来演示上述功能。该组件验证密码是否符合某些标准，例如长度和复杂性。我们将从以下内容开始并添加功能以及测试以确保这些功能正常工作：

¥We will demonstrate the above features by building a <Password> component. This component verifies a password meets certain criteria, such as length and complexity. We will start with the following and add features, as well as tests to make sure the features are working correctly:

<!-- Password.vue -->
<script setup>
import { ref } from 'vue'
const password = ref('')
<script>

<template>
  <div>
    <input v-model="password" />
  </div>
</template>

我们要添加的第一个要求是最小长度。

¥The first requirement we will add is a minimum length.

使用 props 设置最小长度

¥Using props to set a minimum length

我们希望在所有项目中重用此组件，每个项目可能有不同的要求。因此，我们将把 minLength 作为一个 prop 传递给 <Password>：

¥We want to reuse this component in all our projects, each of which may have different requirements. For this reason, we will make the minLength a prop which we pass to <Password>:

如果 password 小于 minLength，我们将显示错误。我们可以通过创建 error 计算属性并使用 v-if 有条件地渲染它来做到这一点：

¥We will show an error if password is less than minLength. We can do this by creating an error computed property, and conditionally rendering it using v-if:

<!-- Password.vue -->
<script setup>
import { ref } from 'vue'

const props = defineProps(['minLength'])
const password = ref('')

const error = computed(() => {
  if (password.value.length < props.minLength) {
    return `Password must be at least ${props.minLength} characters.`
  }
  return
})
<script>

<template>
  <div>
    <input v-model="password" />
    <div v-if="error">{{ error }}</div>
  </div>
</template>

为了测试这一点，我们需要设置 minLength 以及小于该数字的 password。我们可以使用 data 和 props 挂载选项来做到这一点。最后，我们将断言渲染正确的错误消息：

¥To test this, we need to set the minLength, as well as a password that is less than that number. We can do this using the data and props mounting options. Finally, we will assert the correct error message is rendered:

test('renders an error if length is too short', () => {
  const wrapper = mount(Password, {
    props: {
      minLength: 10
    },
    data() {
      return {
        password: 'short'
      }
    }
  })

  expect(wrapper.html()).toContain('Password must be at least 10 characters')
})

为 maxLength 规则编写测试留给读者作为练习！另一种编写方法是使用 setValue 使用太短的密码更新输入。你可以在 表单 中了解更多信息。

¥Writing a test for a maxLength rule is left as an exercise for the reader! Another way to write this would be using setValue to update the input with a password that is too short. You can learn more in Forms.

使用 setProps

¥Using setProps

有时你可能需要为属性更改的副作用编写测试。如果 show 属性是 true，这个简单的 <Show> 组件会渲染一条问候语。

¥Sometimes you may need to write a test for a side effect of a prop changing. This simple <Show> component renders a greeting if the show prop is true.

<!-- Show.vue -->
<script setup>
import { ref } from 'vue'

const { show = true } = defineProps(['show'])
const greeting = ref('Hello')
</script>

<template>
  <div v-if="show">{{ greeting }}</div>
</template>

为了充分测试这一点，我们可能想要验证 greeting 是否默认渲染。我们可以使用 setProps() 更新 show 属性，这会导致 greeting 被隐藏：

¥To test this fully, we might want to verify that greeting is rendered by default. We are able to update the show prop using setProps(), which causes greeting to be hidden:

import { mount } from '@vue/test-utils'
import Show from './Show.vue'

test('renders a greeting when show is true', async () => {
  const wrapper = mount(Show)
  expect(wrapper.html()).toContain('Hello')

  await wrapper.setProps({ show: false })

  expect(wrapper.html()).not.toContain('Hello')
})

我们还在调用 setProps() 时使用 await 关键字，以确保 DOM 在断言运行之前已更新。

¥We also use the await keyword when calling setProps(), to ensure that the DOM has been updated before the assertions run.

结论

¥Conclusion

• 使用 props 和 data 挂载选项来预设组件的状态。

  ¥use the props and data mounting options to pre-set the state of a component.

• 在测试期间使用 setProps() 更新 prop。

  ¥Use setProps() to update a prop during a test.

• 在 setProps() 之前使用 await 关键字，以确保 Vue 在测试继续之前更新 DOM。

  ¥Use the await keyword before setProps() to ensure the Vue will update the DOM before the test continues.

• 直接与你的组件交互可以为你提供更大的覆盖范围。考虑将 setValue 或 trigger 与 data 结合使用，以确保一切正常工作。

  ¥Directly interacting with your component can give you greater coverage. Consider using setValue or trigger in combination with data to ensure everything works correctly.