@@ -11,7 +11,13 @@ const mountedContainers = new Set()
11
11
12
12
function render (
13
13
ui ,
14
- { container, baseElement = container , queries, hydrate = false } = { } ,
14
+ {
15
+ container,
16
+ baseElement = container ,
17
+ queries,
18
+ hydrate = false ,
19
+ wrapper : WrapperComponent ,
20
+ } = { } ,
15
21
) {
16
22
if ( ! container ) {
17
23
// default to document.body instead of documentElement to avoid output of potentially-large
@@ -25,13 +31,18 @@ function render(
25
31
// they're passing us a custom container or not.
26
32
mountedContainers . add ( container )
27
33
34
+ const wrapUiIfNeeded = innerElement =>
35
+ WrapperComponent
36
+ ? React . createElement ( WrapperComponent , null , innerElement )
37
+ : innerElement
38
+
28
39
if ( hydrate ) {
29
40
act ( ( ) => {
30
- ReactDOM . hydrate ( ui , container )
41
+ ReactDOM . hydrate ( wrapUiIfNeeded ( ui ) , container )
31
42
} )
32
43
} else {
33
44
act ( ( ) => {
34
- ReactDOM . render ( ui , container )
45
+ ReactDOM . render ( wrapUiIfNeeded ( ui ) , container )
35
46
} )
36
47
}
37
48
return {
@@ -41,7 +52,7 @@ function render(
41
52
debug : ( el = baseElement ) => console . log ( prettyDOM ( el ) ) ,
42
53
unmount : ( ) => ReactDOM . unmountComponentAtNode ( container ) ,
43
54
rerender : rerenderUi => {
44
- render ( rerenderUi , { container, baseElement} )
55
+ render ( wrapUiIfNeeded ( rerenderUi ) , { container, baseElement} )
45
56
// Intentionally do not return anything to avoid unnecessarily complicating the API.
46
57
// folks can use all the same utilities we return in the first place that are bound to the container
47
58
} ,
@@ -70,25 +81,20 @@ function testHook(callback, options = {}) {
70
81
const result = {
71
82
current : null ,
72
83
}
73
- const toRender = ( ) => {
74
- const hookRender = (
75
- < TestHook callback = { callback } >
76
- { res => {
77
- result . current = res
78
- } }
79
- </ TestHook >
80
- )
81
- if ( options . wrapper ) {
82
- return React . createElement ( options . wrapper , null , hookRender )
83
- }
84
- return hookRender
85
- }
86
- const { unmount, rerender : rerenderComponent } = render ( toRender ( ) )
84
+ const toRender = ( ) => (
85
+ < TestHook callback = { callback } >
86
+ { res => {
87
+ result . current = res
88
+ } }
89
+ </ TestHook >
90
+ )
91
+
92
+ const { unmount, rerender : rerenderComponent } = render ( toRender ( ) , options )
87
93
return {
88
94
result,
89
95
unmount,
90
96
rerender : ( ) => {
91
- rerenderComponent ( toRender ( ) )
97
+ rerenderComponent ( toRender ( ) , options )
92
98
} ,
93
99
}
94
100
}
0 commit comments