[SOLVED] Vue Testing Library, Child Component receives props

Vue Testing Library, Child Component receives props

I'm trying to implement some Testing Library tests on a Vuejs app, but I can't figure out how to pass props to a component within the test.

For example, I want a unit test for a component that appears inside of its ParentComponent template like this. I am trying to write a unit test for the ChildComponent.

<ChildComponent hereIsAProp="important info" />

I'm surprised this scenario isn't covered in the Vue Testing Library basic examples. Makes me think I'm missing some best practice around using/testing Vuejs props.

I imagine something like render(ChildComponent, { props: { hereIsAProp: "new info"}) should do the trick. But I can't find this in the docs and whatnot.

Solution

Testing Libary's render() is a wrapper for Vue Test Util's mount().

The second argument to render() is passed onto mount() as mounting options, and mount() can set the component's props with the props option (in version 2x) or propsData (in version 1x).

So your guess is actually correct:

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