Skip to content

Commit 27ced90

Browse files
committed
Add composition API example
1 parent fa72917 commit 27ced90

File tree

1 file changed

+29
-1
lines changed

1 file changed

+29
-1
lines changed

src/__tests__/set-props.js

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import '@testing-library/jest-dom'
2+
import {defineComponent, h, computed} from 'vue'
23
import {render} from '@testing-library/vue'
3-
import NumberDisplay from './components/NumberDisplay.vue'
4+
import NumberDisplay from './components/NumberDisplay'
45

56
// It'd probably be better if you test the component that's doing the prop
67
// updating to ensure that the props are being updated correctly.
@@ -21,3 +22,30 @@ test('calling render with the same component but different props does not remoun
2122
// meaning we are testing the same component instance we rendered initially.
2223
expect(getByTestId('instance-id')).toHaveTextContent('1')
2324
})
25+
26+
test('works with composition API', async () => {
27+
const Component = defineComponent({
28+
props: {
29+
foo: {type: String, default: 'foo'},
30+
},
31+
setup(props) {
32+
const foobar = computed(() => `${props.foo}-bar`)
33+
return () =>
34+
h(
35+
'div',
36+
{'data-testid': 'node'},
37+
`Foo is: ${props.foo}. Foobar is: ${foobar.value}`,
38+
)
39+
},
40+
})
41+
42+
const {setProps, getByTestId} = render(Component)
43+
44+
const node = getByTestId('node')
45+
46+
expect(node).toHaveTextContent('Foo is: foo. Foobar is: foo-bar')
47+
48+
await setProps({foo: 'qux'})
49+
50+
expect(node).toHaveTextContent('Foo is: qux. Foobar is: qux-bar')
51+
})

0 commit comments

Comments
 (0)