Skip to content

Commit

Permalink
fix: forward Ref prop on mount (#1434)
Browse files Browse the repository at this point in the history
  • Loading branch information
freakzlike committed Apr 19, 2022
1 parent 0d63f35 commit 7059cff
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 3 deletions.
4 changes: 2 additions & 2 deletions src/mount.ts
Expand Up @@ -2,7 +2,7 @@ import {
h,
createApp,
defineComponent,
reactive,
shallowReactive,
FunctionalComponent,
ComponentPublicInstance,
ComponentOptionsWithObjectProps,
Expand Down Expand Up @@ -379,7 +379,7 @@ export function mount(
const MOUNT_COMPONENT_REF = 'VTU_COMPONENT'
// we define props as reactive so that way when we update them with `setProps`
// Vue's reactivity system will cause a rerender.
const props = reactive({
const props = shallowReactive({
...options?.attrs,
...options?.propsData,
...options?.props,
Expand Down
27 changes: 26 additions & 1 deletion tests/props.spec.ts
Expand Up @@ -2,7 +2,7 @@ import { mount, shallowMount } from '../src'
import WithProps from './components/WithProps.vue'
import PropWithSymbol from './components/PropWithSymbol.vue'
import Hello from './components/Hello.vue'
import { defineComponent, h } from 'vue'
import { defineComponent, h, isRef, ref } from 'vue'
import Title from './components/FunctionComponent'

describe('props', () => {
Expand Down Expand Up @@ -157,6 +157,31 @@ describe('props', () => {
expect(wrapper.find('#foo2').attributes().foo).toBe('foo2 value')
})

it('should forward ref as raw prop', () => {
const TestComponent = defineComponent({
props: {
refProp: {
type: [Object],
required: true
}
},
setup(props) {
return () =>
h('div', [
h('h1', isRef(props.refProp) ? 'is ref' : 'is not ref'),
h('span', props.refProp.value)
])
}
})

const refProp = ref('Some value')
const wrapper = mount(TestComponent, {
props: { refProp }
})
expect(wrapper.find('h1').text()).toBe('is ref')
expect(wrapper.find('span').text()).toBe('Some value')
})

it('returns reactive props on a stubbed component shallow case', async () => {
const Foo = {
name: 'Foo',
Expand Down

0 comments on commit 7059cff

Please sign in to comment.