Skip to content

Commit 4acdb8b

Browse files
committed
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.
1 parent b900824 commit 4acdb8b

File tree

1 file changed

+101
-0
lines changed

1 file changed

+101
-0
lines changed

src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js

+101
Original file line numberDiff line numberDiff line change
@@ -64,5 +64,106 @@ describe('ReactDOMFiber', () => {
6464

6565
expect(container.textContent).toEqual('10');
6666
});
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+
});
67168
}
68169
});

0 commit comments

Comments
 (0)