Vue测试库，子组件接收props答案

【问题标题】：Vue Testing Library, Child Component receives propsVue测试库，子组件接收props
【发布时间】：2021-11-11 17:24:05
【问题描述】：

我正在尝试在 Vuejs 应用程序上实现一些测试库测试，但我不知道如何将道具传递给测试中的组件。

例如，我想要一个像这样出现在其 ParentComponent 模板内的组件的单元测试。我正在尝试为 ChildComponent 编写单元测试。

<ChildComponent hereIsAProp="important info" />

我很惊讶 Vue 测试库 basic examples 没有涵盖这种情况。让我觉得我错过了一些关于使用/测试 Vuejs 道具的最佳实践。

我想像render(ChildComponent, { props: { hereIsAProp: "new info"}) 这样的东西应该可以解决问题。但我在文档中找不到这个。

【问题讨论】：

“我想要一个 ChildComponent 呈现一些默认道具的测试场景” - 这应该在子测试中进行测试，而不是在父测试中进行测试，而不是在特定的默认道具中进行测试。有没有默认的 prop 值没有关系，只要正确处理空的 prop 即可。
@EstusFlask 对不起，如果我不清楚。我正在尝试为 ChildComponent 编写测试。你是说不需要在子组件中测试条件逻辑？
你需要在有和没有 prop 的情况下进行测试，并断言这个 prop 影响的东西。

【解决方案1】：

为 Vue Test Util 的 mount() 测试库的 render() is a wrapper。

render() 的第二个参数作为挂载选项传递给mount()，mount() 可以使用props option（版本 2x）或propsData（版本 1x）设置组件的属性。

所以你的猜测实际上是正确的：

render(ChildComponent, { props: { hereIsAProp: "new info" } })

【讨论】：