Skip to content

Commit 40eab96

Browse files
committed
Replace setProps with rerender Function
* Removed `setProps` function (and tests) to confirm with Testing Library standards. * Added `rerender` function (and tests) to make the API more familiar to the Testing Library family.
1 parent 9e20198 commit 40eab96

File tree

3 files changed

+67
-53
lines changed

3 files changed

+67
-53
lines changed

src/__tests__/rerender.js

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import '@testing-library/jest-dom'
2+
import {defineComponent, h, computed} from 'vue'
3+
import {render} from '@testing-library/vue'
4+
import NumberDisplay from './components/NumberDisplay'
5+
6+
test('calling rerender remounts the component and updates the props', () => {
7+
const {rerender, getByTestId} = render(NumberDisplay, {
8+
props: {number: 1},
9+
})
10+
11+
expect(getByTestId('number-display')).toHaveTextContent('1')
12+
13+
rerender({props: {number: 3}})
14+
expect(getByTestId('number-display')).toHaveTextContent('3')
15+
16+
// Assert that, after rerendering and updating props, the component has been remounted,
17+
// meaning we are testing a different component instance than we rendered initially.
18+
expect(getByTestId('instance-id')).toHaveTextContent('2')
19+
})
20+
21+
test('rerender works with composition API', () => {
22+
const Component = defineComponent({
23+
props: {
24+
foo: {type: String, default: 'foo'},
25+
},
26+
setup(props) {
27+
const foobar = computed(() => `${props.foo}-bar`)
28+
return () =>
29+
h(
30+
'div',
31+
{'data-testid': 'node'},
32+
`Foo is: ${props.foo}. Foobar is: ${foobar.value}`,
33+
)
34+
},
35+
})
36+
37+
const {rerender, getByTestId} = render(Component)
38+
39+
const originalNode = getByTestId('node')
40+
expect(originalNode).toHaveTextContent('Foo is: foo. Foobar is: foo-bar')
41+
42+
rerender({props: {foo: 'qux'}})
43+
44+
const newNode = getByTestId('node')
45+
expect(newNode).toHaveTextContent('Foo is: qux. Foobar is: qux-bar')
46+
})

src/__tests__/set-props.js

-51
This file was deleted.

src/vue-testing-library.js

+21-2
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ function render(
4747
// additionalOptions = configurationCb(router)
4848
// }
4949

50-
const wrapper = mount(
50+
let wrapper = mount(
5151
TestComponent,
5252
merge({
5353
attachTo: container,
@@ -73,7 +73,26 @@ function render(
7373
unmount: () => wrapper.unmount(),
7474
html: () => wrapper.html(),
7575
emitted: () => wrapper.emitted(),
76-
setProps: props => wrapper.setProps(props),
76+
rerender: ({props}) => {
77+
wrapper.unmount()
78+
mountedWrappers.delete(wrapper)
79+
80+
wrapper = mount(
81+
TestComponent,
82+
merge({
83+
attachTo: container,
84+
global: {
85+
plugins,
86+
},
87+
...mountOptions,
88+
props,
89+
// ...additionalOptions,
90+
}),
91+
)
92+
93+
unwrapNode(wrapper.parentElement)
94+
mountedWrappers.add(wrapper)
95+
},
7796
...getQueriesForElement(baseElement),
7897
}
7998
}

0 commit comments

Comments
 (0)