diff --git a/test/CSSTransitionGroup-test.js b/test/CSSTransitionGroup-test.js index 2776a8e0..371981d9 100644 --- a/test/CSSTransitionGroup-test.js +++ b/test/CSSTransitionGroup-test.js @@ -10,6 +10,7 @@ let TransitionGroup; describe('CSSTransitionGroup', () => { let container; let consoleErrorSpy; + let render; function YoloTransition({ id, ...props }) { const nodeRef = React.useRef() @@ -27,6 +28,12 @@ describe('CSSTransitionGroup', () => { React = require('react'); ReactDOM = require('react-dom'); + render = (element, container, callback) => ReactDOM.render( + {element}, + container, + callback + ) + TransitionGroup = require('../src/TransitionGroup'); container = document.createElement('div'); @@ -39,7 +46,7 @@ describe('CSSTransitionGroup', () => { it('should clean-up silently after the timeout elapses', () => { - ReactDOM.render( + render( , @@ -50,7 +57,7 @@ describe('CSSTransitionGroup', () => { expect(transitionGroupDiv.childNodes.length).toBe(1); - ReactDOM.render( + render( , @@ -72,7 +79,7 @@ describe('CSSTransitionGroup', () => { }); it('should keep both sets of DOM nodes around', () => { - ReactDOM.render( + render( , @@ -83,7 +90,7 @@ describe('CSSTransitionGroup', () => { expect(transitionGroupDiv.childNodes.length).toBe(1); - ReactDOM.render( + render( , @@ -96,7 +103,7 @@ describe('CSSTransitionGroup', () => { }); it('should switch transitionLeave from false to true', () => { - ReactDOM.render( + render( , @@ -107,7 +114,7 @@ describe('CSSTransitionGroup', () => { expect(transitionGroupDiv.childNodes.length).toBe(1); - ReactDOM.render( + render( , @@ -118,7 +125,7 @@ describe('CSSTransitionGroup', () => { expect(transitionGroupDiv.childNodes.length).toBe(1); - ReactDOM.render( + render( , @@ -132,7 +139,7 @@ describe('CSSTransitionGroup', () => { it('should work with a null child', () => { - ReactDOM.render( + render( {[null]} , @@ -144,11 +151,11 @@ describe('CSSTransitionGroup', () => { const NullComponent = () => null; // Testing the whole lifecycle of entering and exiting, // because those lifecycle methods used to fail when the DOM node was null. - ReactDOM.render( + render( , container, ); - ReactDOM.render( + render( @@ -156,14 +163,14 @@ describe('CSSTransitionGroup', () => { , container, ); - ReactDOM.render( + render( , container, ); }); it('should transition from one to null', () => { - ReactDOM.render( + render( , @@ -174,7 +181,7 @@ describe('CSSTransitionGroup', () => { expect(transitionGroupDiv.childNodes.length).toBe(1); - ReactDOM.render( + render( {null} , @@ -188,7 +195,7 @@ describe('CSSTransitionGroup', () => { }); it('should transition from false to one', () => { - ReactDOM.render( + render( {false} , @@ -199,7 +206,7 @@ describe('CSSTransitionGroup', () => { expect(transitionGroupDiv.childNodes.length).toBe(0); - ReactDOM.render( + render( , @@ -221,8 +228,8 @@ describe('CSSTransitionGroup', () => { } } - ReactDOM.render(, container); - ReactDOM.render( + render(, container); + render( , @@ -259,7 +266,7 @@ describe('CSSTransitionGroup', () => { } } - ReactDOM.render(, container); + render(, container); // Testing that no exception is thrown here, as the timeout has been cleared. jest.runAllTimers(); @@ -298,7 +305,7 @@ describe('CSSTransitionGroup', () => { } } - ReactDOM.render(, container); + render(, container); const transitionGroupDiv = container.childNodes[0] transitionGroupDiv.childNodes.forEach(child => { expect(hasClass(child, extraClassNameProp)).toBe(true); diff --git a/test/TransitionGroup-test.js b/test/TransitionGroup-test.js index f921ae40..8920e8c2 100644 --- a/test/TransitionGroup-test.js +++ b/test/TransitionGroup-test.js @@ -8,7 +8,7 @@ let Transition // Most of the real functionality is covered in other unit tests, this just // makes sure we're wired up correctly. describe('TransitionGroup', () => { - let container, log, Child + let container, log, Child, render; beforeEach(() => { React = require('react') @@ -16,6 +16,12 @@ describe('TransitionGroup', () => { Transition = require('../src/Transition').default TransitionGroup = require('../src/TransitionGroup') + render = (element, container, callback) => ReactDOM.render( + {element}, + container, + callback + ) + container = document.createElement('div') log = [] @@ -70,7 +76,7 @@ describe('TransitionGroup', () => { }) it('should work with no children', () => { - ReactDOM.render(, container) + render(, container) }) it('should handle transitioning correctly', () => { @@ -85,18 +91,18 @@ describe('TransitionGroup', () => { } jest.useFakeTimers() - ReactDOM.render(, container) + render(, container) jest.runAllTimers() expect(log).toEqual(['appear', 'appearing', 'appeared']) log = [] - ReactDOM.render(, container) + render(, container) jest.runAllTimers() expect(log).toEqual(['enter', 'entering', 'entered']) log = [] - ReactDOM.render(, container) + render(, container) jest.runAllTimers() expect(log).toEqual(['exit', 'exiting', 'exited']) })