Skip to content

Commit e233d0e

Browse files
committed
Update test following review
- Use beforeEach and afterEach to set up and tear down container element for use in each test - Move any functions specific to one test to within test body (improves readability imo)
1 parent c98f56b commit e233d0e

File tree

1 file changed

+34
-35
lines changed

1 file changed

+34
-35
lines changed

packages/react-dom/src/__tests__/ReactDOMComponentTree-test.js

Lines changed: 34 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -13,39 +13,19 @@ describe('ReactDOMComponentTree', () => {
1313
let React;
1414
let ReactDOM;
1515
let ReactDOMServer;
16-
17-
function renderMarkupIntoDocument(elt) {
18-
const container = document.createElement('div');
19-
// Force server-rendering path:
20-
container.innerHTML = ReactDOMServer.renderToString(elt);
21-
return ReactDOM.hydrate(elt, container);
22-
}
23-
24-
function simulateInput(elem, value) {
25-
const inputEvent = new Event('input', {
26-
bubbles: true,
27-
});
28-
setUntrackedInputValue.call(elem, value);
29-
elem.dispatchEvent(inputEvent);
30-
}
31-
32-
function simulateClick(elem) {
33-
const event = new MouseEvent('click', {
34-
bubbles: true,
35-
});
36-
elem.dispatchEvent(event);
37-
}
38-
39-
const setUntrackedInputValue = Object.getOwnPropertyDescriptor(
40-
HTMLInputElement.prototype,
41-
'value',
42-
).set;
16+
let container;
4317

4418
beforeEach(() => {
4519
React = require('react');
4620
ReactDOM = require('react-dom');
4721
ReactDOMServer = require('react-dom/server');
48-
document.innerHTML = '';
22+
container = document.createElement('div');
23+
document.body.appendChild(container);
24+
});
25+
26+
afterEach(() => {
27+
document.body.removeChild(container);
28+
container = null;
4929
});
5030

5131
it('finds nodes for instances', () => {
@@ -68,7 +48,12 @@ describe('ReactDOMComponentTree', () => {
6848
}
6949

7050
function renderAndGetRef(toRef) {
71-
const inst = renderMarkupIntoDocument(<Component toRef={toRef} />);
51+
// We need to unmount any React components from previous assertions in
52+
// this test
53+
ReactDOM.unmountComponentAtNode(container);
54+
const elt = <Component toRef={toRef} />;
55+
container.innerHTML = ReactDOMServer.renderToString(elt);
56+
const inst = ReactDOM.hydrate(elt, container);
7257
return inst.refs.target.nodeName;
7358
}
7459

@@ -99,10 +84,15 @@ describe('ReactDOMComponentTree', () => {
9984
}
10085
}
10186

87+
function simulateClick(elem) {
88+
const event = new MouseEvent('click', {
89+
bubbles: true,
90+
});
91+
elem.dispatchEvent(event);
92+
}
93+
10294
const component = <ClosestInstance />;
103-
const container = document.createElement('div');
10495
ReactDOM.render(<section>{component}</section>, container);
105-
document.body.appendChild(container);
10696
expect(currentTargetID).toBe(null);
10797
simulateClick(document.getElementById(nonReactElemID));
10898
expect(currentTargetID).toBe(closestInstanceID);
@@ -130,10 +120,21 @@ describe('ReactDOMComponentTree', () => {
130120
}
131121
}
132122

123+
const setUntrackedInputValue = Object.getOwnPropertyDescriptor(
124+
HTMLInputElement.prototype,
125+
'value',
126+
).set;
127+
128+
function simulateInput(elem, value) {
129+
const inputEvent = new Event('input', {
130+
bubbles: true,
131+
});
132+
setUntrackedInputValue.call(elem, value);
133+
elem.dispatchEvent(inputEvent);
134+
}
135+
133136
const component = <Controlled />;
134-
const container = document.createElement('div');
135137
const instance = ReactDOM.render(component, container);
136-
document.body.appendChild(container);
137138
spyOn(console, 'error');
138139
expectDev(console.error.calls.count()).toBe(0);
139140
simulateInput(instance.a, finishValue);
@@ -151,7 +152,6 @@ describe('ReactDOMComponentTree', () => {
151152
it('finds instance of node that is attempted to be unmounted', () => {
152153
spyOn(console, 'error');
153154
const component = <div />;
154-
const container = document.createElement('div');
155155
const node = ReactDOM.render(<div>{component}</div>, container);
156156
ReactDOM.unmountComponentAtNode(node);
157157
expectDev(console.error.calls.count()).toBe(1);
@@ -171,7 +171,6 @@ describe('ReactDOMComponentTree', () => {
171171
</div>
172172
);
173173
const anotherComponent = <div />;
174-
const container = document.createElement('div');
175174
const instance = ReactDOM.render(component, container);
176175
ReactDOM.render(anotherComponent, instance);
177176
expectDev(console.error.calls.count()).toBe(1);

0 commit comments

Comments
 (0)