Skip to content

Commit c61ee64

Browse files
committed
[Shallow] Add tests for effects with inputs and cleanup (facebook#15275)
1 parent a16136a commit c61ee64

File tree

2 files changed

+76
-12
lines changed

2 files changed

+76
-12
lines changed

packages/react-test-renderer/src/ReactShallowRenderer.js

+1-12
Original file line numberDiff line numberDiff line change
@@ -346,7 +346,7 @@ class ReactShallowRenderer {
346346
cleanup: memoizedState.cleanup,
347347
run:
348348
inputs == null ||
349-
shouldRunEffectsBasedOnInputs(memoizedState.inputs, inputs),
349+
!areHookInputsEqual(inputs, memoizedState.inputs),
350350
};
351351
}
352352
}
@@ -911,15 +911,4 @@ function getMaskedContext(contextTypes, unmaskedContext) {
911911
return context;
912912
}
913913

914-
function shouldRunEffectsBasedOnInputs(
915-
before: Array<mixed> | void | null,
916-
after: Array<mixed>,
917-
) {
918-
if (before == null || before.length !== after.length) {
919-
return true;
920-
}
921-
922-
return before.some((value, i) => after[i] !== value);
923-
}
924-
925914
export default ReactShallowRenderer;

packages/react-test-renderer/src/__tests__/ReactShallowRendererHooks-test.js

+75
Original file line numberDiff line numberDiff line change
@@ -280,6 +280,81 @@ describe('ReactShallowRenderer with hooks', () => {
280280
'call effect',
281281
]);
282282
});
283+
284+
it('should trigger effects and cleanup depending on inputs', () => {
285+
let _setFriend;
286+
const happenings = [];
287+
288+
function SomeComponent() {
289+
const [friend, setFriend] = React.useState('Bons');
290+
const [cat] = React.useState('Muskus');
291+
_setFriend = setFriend;
292+
293+
React.useEffect(
294+
() => {
295+
happenings.push('call friend effect');
296+
return () => {
297+
happenings.push('cleanup friend effect');
298+
};
299+
},
300+
[friend],
301+
);
302+
303+
React.useEffect(() => {
304+
happenings.push('call empty effect');
305+
return () => {
306+
happenings.push('cleanup empty effect');
307+
};
308+
});
309+
310+
React.useEffect(
311+
() => {
312+
happenings.push('call cat effect');
313+
return () => {
314+
happenings.push('cleanup cat effect');
315+
};
316+
},
317+
[cat],
318+
);
319+
320+
React.useEffect(
321+
() => {
322+
happenings.push('call both effect');
323+
return () => {
324+
happenings.push('cleanup both effect');
325+
};
326+
},
327+
[friend, cat],
328+
);
329+
330+
return (
331+
<div>
332+
Hello {friend} with {cat}
333+
</div>
334+
);
335+
}
336+
337+
const shallowRenderer = createRenderer({callEffects: true});
338+
shallowRenderer.render(<SomeComponent />);
339+
340+
expect(happenings).toEqual([
341+
'call friend effect',
342+
'call empty effect',
343+
'call cat effect',
344+
'call both effect',
345+
]);
346+
347+
happenings.splice(0);
348+
_setFriend('Maryam');
349+
expect(happenings).toEqual([
350+
'cleanup friend effect',
351+
'call friend effect',
352+
'cleanup empty effect',
353+
'call empty effect',
354+
'cleanup both effect',
355+
'call both effect',
356+
]);
357+
});
283358
});
284359

285360
it('should work with useRef', () => {

0 commit comments

Comments
 (0)