Add tests for findDOMNode on fragment and text
These are new features that aren't covered by existing tests. It is now possible to use findDOMNode to find a text node. When a component returns a fragment, it will search to find the first host component just like element.querySelector does.
Sebastian Markbage committed
Oct 24, 2016 at 16:16 UTC
8e2d7f8d2705159ca354294018bb98db1e0f4a71
1 file changed
+101
src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js
+101
@@ -64,5 +64,106 @@ describe('ReactDOMFiber', () => {
64
65
expect(container.textContent).toEqual('10');
66
});
67
+
68
+ it('finds the DOM Text node of a string child', () => {
69
+ class Text extends React.Component {
70
+ render() {
71
+ return this.props.value;
72
+ }
73
+ }
74
+
75
+ let instance = null;
76
+ ReactDOM.render(
77
+ <Text value="foo" ref={ref => instance = ref} />,
78
+ container
79
+ );
80
+
81
+ const textNode = ReactDOM.findDOMNode(instance);
82
+ expect(textNode).toBe(container.firstChild);
83
+ expect(textNode.nodeType).toBe(3);
84
+ expect(textNode.nodeValue).toBe('foo');
85
+ });
86
+
87
+ it('finds the first child when a component returns a fragment', () => {
88
+ class Fragment extends React.Component {
89
+ render() {
90
+ return [
91
+ <div />,
92
+ <span />,
93
+ ];
94
+ }
95
+ }
96
+
97
+ let instance = null;
98
+ ReactDOM.render(
99
+ <Fragment ref={ref => instance = ref} />,
100
+ container
101
+ );
102
+
103
+ expect(container.childNodes.length).toBe(2);
104
+
105
+ const firstNode = ReactDOM.findDOMNode(instance);
106
+ expect(firstNode).toBe(container.firstChild);
107
+ expect(firstNode.tagName).toBe('DIV');
108
+ });
109
+
110
+ it('finds the first child even when fragment is nested', () => {
111
+ class Wrapper extends React.Component {
112
+ render() {
113
+ return this.props.children;
114
+ }
115
+ }
116
+
117
+ class Fragment extends React.Component {
118
+ render() {
119
+ return [
120
+ <Wrapper><div /></Wrapper>,
121
+ <span />,
122
+ ];
123
+ }
124
+ }
125
+
126
+ let instance = null;
127
+ ReactDOM.render(
128
+ <Fragment ref={ref => instance = ref} />,
129
+ container
130
+ );
131
+
132
+ expect(container.childNodes.length).toBe(2);
133
+
134
+ const firstNode = ReactDOM.findDOMNode(instance);
135
+ expect(firstNode).toBe(container.firstChild);
136
+ expect(firstNode.tagName).toBe('DIV');
137
+ });
138
+
139
+ it('finds the first child even when first child renders null', () => {
140
+ class NullComponent extends React.Component {
141
+ render() {
142
+ return null;
143
+ }
144
+ }
145
+
146
+ class Fragment extends React.Component {
147
+ render() {
148
+ return [
149
+ <NullComponent />,
150
+ <div />,
151
+ <span />,
152
+ ];
153
+ }
154
+ }
155
+
156
+ let instance = null;
157
+ ReactDOM.render(
158
+ <Fragment ref={ref => instance = ref} />,
159
+ container
160
+ );
161
+
162
+ expect(container.childNodes.length).toBe(2);
163
+
164
+ const firstNode = ReactDOM.findDOMNode(instance);
165
+ expect(firstNode).toBe(container.firstChild);
166
+ expect(firstNode.tagName).toBe('DIV');
167
+ });
168
}
169
});