1
1
import '@testing-library/jest-dom'
2
+ import { defineComponent , h , computed } from 'vue'
2
3
import { render } from '@testing-library/vue'
3
- import NumberDisplay from './components/NumberDisplay.vue '
4
+ import NumberDisplay from './components/NumberDisplay'
4
5
5
6
// It'd probably be better if you test the component that's doing the prop
6
7
// 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
21
22
// meaning we are testing the same component instance we rendered initially.
22
23
expect ( getByTestId ( 'instance-id' ) ) . toHaveTextContent ( '1' )
23
24
} )
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