将数据传递给组件

Vue 测试工具提供了多种方法来设置组件上的数据和道具，以便您可以在不同的场景中完全测试组件的行为。

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

密码组件

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

const Password = {
  template: `
    <div>
      <input v-model="password">
    </div>
  `,
  data() {
    return {
      password: ''
    }
  }
}

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

使用 `props` 设置最小长度

我们希望在所有项目中重用此组件，每个项目可能都有不同的要求。为此，我们将使 `minLength` 成为一个 **prop**，我们将其传递给 `<Password>`

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

const Password = {
  template: `
    <div>
      <input v-model="password">
      <div v-if="error">{{ error }}</div>
    </div>
  `,
  props: {
    minLength: {
      type: Number
    }
  },
  data() {
    return {
      password: ''
    }
  },
  computed: {
    error() {
      if (this.password.length < this.minLength) {
        return `Password must be at least ${this.minLength} characters.`
      }
      return
    }
  }
}

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

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` 将输入更新为太短的密码。您可以在 表单 中了解更多信息。

使用 `setProps`

有时您可能需要编写一个测试来测试道具更改的副作用。这个简单的 `<Show>` 组件在 `show` 道具为 `true` 时渲染问候语。

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

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      greeting: 'Hello'
    }
  }
}
</script>

为了完全测试这一点，我们可能希望验证 `greeting` 默认情况下是否已渲染。我们能够使用 `setProps()` 更新 `show` 道具，这会导致 `greeting` 被隐藏

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 已更新。

结论

• 使用 `props` 和 `data` 挂载选项来预先设置组件的状态。
• 使用 `setProps()` 在测试期间更新道具。
• 在 `setProps()` 之前使用 `await` 关键字以确保 Vue 在测试继续之前更新 DOM。
• 直接与您的组件交互可以为您提供更大的覆盖范围。考虑将 `setValue` 或 `trigger` 与 `data` 结合使用，以确保一切正常工作。