Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 4dc3ef2

Browse files
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 4dc3ef2

File tree

3 files changed

+82
-69
lines changed

3 files changed

+82
-69
lines changed

‎src/__tests__/rerender.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
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+
// It'd probably be better if you test the component that's doing the rerendering
7+
// to ensure that the rerendered component is being updated correctly.
8+
// That said, if you'd prefer to, for example, update the props of a rendered
9+
// component, this function can be used to do so.
10+
test('calling rerender remounts the component and updates the props', () => {
11+
const {rerender, getByTestId} = render(NumberDisplay, {
12+
props: {number: 1},
13+
})
14+
15+
expect(getByTestId('number-display')).toHaveTextContent('1')
16+
17+
rerender({props: {number: 3}})
18+
expect(getByTestId('number-display')).toHaveTextContent('3')
19+
20+
rerender({props: {number: 5}})
21+
expect(getByTestId('number-display')).toHaveTextContent('5')
22+
23+
// Assert that, after rerendering and updating props, the component has been remounted,
24+
// meaning we are testing a different component instance than we rendered initially.
25+
expect(getByTestId('instance-id')).toHaveTextContent('3')
26+
})
27+
28+
test('rerender works with composition API', () => {
29+
const Component = defineComponent({
30+
props: {
31+
foo: {type: String, default: 'foo'},
32+
},
33+
setup(props) {
34+
const foobar = computed(() => `${props.foo}-bar`)
35+
return () =>
36+
h(
37+
'div',
38+
{'data-testid': 'node'},
39+
`Foo is: ${props.foo}. Foobar is: ${foobar.value}`,
40+
)
41+
},
42+
})
43+
44+
const {rerender, getByTestId} = render(Component)
45+
46+
const originalNode = getByTestId('node')
47+
expect(originalNode).toHaveTextContent('Foo is: foo. Foobar is: foo-bar')
48+
49+
rerender({props: {foo: 'qux'}})
50+
51+
const newNode = getByTestId('node')
52+
expect(newNode).toHaveTextContent('Foo is: qux. Foobar is: qux-bar')
53+
})

‎src/__tests__/set-props.js‎

Lines changed: 0 additions & 51 deletions
This file was deleted.

‎src/vue-testing-library.js‎

Lines changed: 29 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -47,23 +47,29 @@ function render(
4747
// additionalOptions = configurationCb(router)
4848
// }
4949

50-
const wrapper = mount(
51-
TestComponent,
52-
merge({
53-
attachTo: container,
54-
global: {
55-
plugins,
56-
},
57-
...mountOptions,
58-
// ...additionalOptions,
59-
}),
60-
)
61-
62-
// this removes the additional "data-v-app" div node from VTU:
63-
// https://github.com/vuejs/vue-test-utils-next/blob/master/src/mount.ts#L196-L213
64-
unwrapNode(wrapper.parentElement)
65-
66-
mountedWrappers.add(wrapper)
50+
const mountComponent = (Component, newProps) => {
51+
const wrapper = mount(
52+
Component,
53+
merge({
54+
attachTo: container,
55+
global: {
56+
plugins,
57+
},
58+
...mountOptions,
59+
props: newProps || mountOptions.props,
60+
// ...additionalOptions,
61+
}),
62+
)
63+
64+
// this removes the additional "data-v-app" div node from VTU:
65+
// https://github.com/vuejs/vue-test-utils-next/blob/master/src/mount.ts#L196-L213
66+
unwrapNode(wrapper.parentElement)
67+
68+
mountedWrappers.add(wrapper)
69+
return wrapper
70+
}
71+
72+
let wrapper = mountComponent(TestComponent)
6773

6874
return {
6975
container,
@@ -73,7 +79,12 @@ function render(
7379
unmount: () => wrapper.unmount(),
7480
html: () => wrapper.html(),
7581
emitted: () => wrapper.emitted(),
76-
setProps: props => wrapper.setProps(props),
82+
rerender: ({props}) => {
83+
wrapper.unmount()
84+
mountedWrappers.delete(wrapper)
85+
86+
wrapper = mountComponent(TestComponent, props)
87+
},
7788
...getQueriesForElement(baseElement),
7889
}
7990
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /