+
+ );
+ });
it('should not be appearing in normal enter mode', done => {
let count = 0;
+ const nodeRef = React.createRef()
mount(
-
+
).setProps({
in: true,
- onEnter(node, isAppearing){
+ onEnter(isAppearing){
count++;
expect(isAppearing).toEqual(false);
- expect(node.className).toEqual('not-appear-test-enter');
+ expect(nodeRef.current.className).toEqual('not-appear-test-enter');
},
- onEntering(node, isAppearing){
+ onEntering(isAppearing){
count++;
expect(isAppearing).toEqual(false);
- expect(node.className).toEqual('not-appear-test-enter not-appear-test-enter-active');
+ expect(nodeRef.current.className).toEqual('not-appear-test-enter not-appear-test-enter-active');
},
- onEntered(node, isAppearing){
+ onEntered(isAppearing){
expect(isAppearing).toEqual(false);
- expect(node.className).toEqual('not-appear-test-enter-done');
+ expect(nodeRef.current.className).toEqual('not-appear-test-enter-done');
expect(count).toEqual(2);
done();
}
@@ -202,9 +237,11 @@ describe('CSSTransition', () => {
});
it('should not enter the transition states when appear=false', () => {
+ const nodeRef = React.createRef()
mount(
{
throw Error('Entred called!')
}}
>
-
+
);
});
@@ -227,16 +264,18 @@ describe('CSSTransition', () => {
});
describe('exiting', ()=> {
- let instance;
+ let wrapper, nodeRef;
beforeEach(() => {
- instance = mount(
+ nodeRef = React.createRef()
+ wrapper = mount(
-
+
)
});
@@ -244,21 +283,21 @@ describe('CSSTransition', () => {
it('should apply classes at each transition state', done => {
let count = 0;
- instance.setProps({
+ wrapper.setProps({
in: false,
- onExit(node){
+ onExit(){
count++;
- expect(node.className).toEqual('test-exit');
+ expect(nodeRef.current.className).toEqual('test-exit');
},
- onExiting(node){
+ onExiting(){
count++;
- expect(node.className).toEqual('test-exit test-exit-active');
+ expect(nodeRef.current.className).toEqual('test-exit test-exit-active');
},
- onExited(node){
- expect(node.className).toEqual('test-exit-done');
+ onExited(){
+ expect(nodeRef.current.className).toEqual('test-exit-done');
expect(count).toEqual(2);
done();
}
@@ -267,9 +306,11 @@ describe('CSSTransition', () => {
it('should apply custom classNames names', done => {
let count = 0;
- instance = mount(
+ const nodeRef = React.createRef()
+ wrapper = mount(
{
exitDone: 'custom-super-done',
}}
>
-
+
);
- instance.setProps({
+ wrapper.setProps({
in: false,
- onExit(node){
+ onExit() {
count++;
- expect(node.className).toEqual('custom');
+ expect(nodeRef.current.className).toEqual('custom');
},
- onExiting(node){
+ onExiting() {
count++;
- expect(node.className).toEqual('custom custom-super-active');
+ expect(nodeRef.current.className).toEqual('custom custom-super-active');
},
- onExited(node){
- expect(node.className).toEqual('custom-super-done');
+ onExited() {
+ expect(nodeRef.current.className).toEqual('custom-super-done');
expect(count).toEqual(2);
done();
}
@@ -305,30 +346,32 @@ describe('CSSTransition', () => {
it('should support empty prefix', done => {
let count = 0;
- const instance = mount(
+ const nodeRef = React.createRef()
+ const wrapper = mount(
-
+
)
- instance.setProps({
+ wrapper.setProps({
in: false,
- onExit(node){
+ onExit() {
count++;
- expect(node.className).toEqual('exit');
+ expect(nodeRef.current.className).toEqual('exit');
},
- onExiting(node){
+ onExiting() {
count++;
- expect(node.className).toEqual('exit exit-active');
+ expect(nodeRef.current.className).toEqual('exit exit-active');
},
- onExited(node){
- expect(node.className).toEqual('exit-done');
+ onExited() {
+ expect(nodeRef.current.className).toEqual('exit-done');
expect(count).toEqual(2);
done();
}
@@ -337,11 +380,11 @@ describe('CSSTransition', () => {
});
describe('reentering', () => {
- it('should remove dynamically applied classes', done => {
+ it('should remove dynamically applied classes', async () => {
let count = 0;
class Test extends React.Component {
render() {
- const { direction, text, ...props } = this.props;
+ const { direction, text, nodeRef, ...props } = this.props;
return (
{
- {text}
+ {text}
)
}
}
- const instance = mount(
)
+ const nodeRef = {
+ foo: React.createRef(),
+ bar: React.createRef(),
+ }
+
+ const wrapper = mount(
)
const rerender = getProps => new Promise(resolve =>
- instance.setProps({
+ wrapper.setProps({
onEnter: undefined,
onEntering: undefined,
onEntered: undefined,
@@ -378,40 +427,39 @@ describe('CSSTransition', () => {
})
);
- Promise.resolve().then(() =>
- rerender(resolve => ({
- direction: 'up',
- text: 'bar',
+ await rerender(resolve => ({
+ direction: 'up',
+ text: 'bar',
+ nodeRef: nodeRef.bar,
- onEnter(node) {
- count++;
- expect(node.className).toEqual('up-enter');
- },
- onEntering(node) {
- count++;
- expect(node.className).toEqual('up-enter up-enter-active');
- resolve()
- }
- }))
- ).then(() => {
- return rerender(resolve => ({
- direction: 'down',
- text: 'foo',
-
- onEntering(node) {
- count++;
- expect(node.className).toEqual('down-enter down-enter-active');
- },
- onEntered(node) {
- count++;
- expect(node.className).toEqual('down-enter-done');
- resolve();
- }
- }))
- }).then(() => {
- expect(count).toEqual(4);
- done();
- });
+ onEnter() {
+ count++;
+ expect(nodeRef.bar.current.className).toEqual('up-enter');
+ },
+ onEntering() {
+ count++;
+ expect(nodeRef.bar.current.className).toEqual('up-enter up-enter-active');
+ resolve()
+ }
+ }))
+
+ await rerender(resolve => ({
+ direction: 'down',
+ text: 'foo',
+ nodeRef: nodeRef.foo,
+
+ onEntering() {
+ count++;
+ expect(nodeRef.foo.current.className).toEqual('down-enter down-enter-active');
+ },
+ onEntered() {
+ count++;
+ expect(nodeRef.foo.current.className).toEqual('down-enter-done');
+ resolve();
+ }
+ }))
+
+ expect(count).toEqual(4);
});
});
});
diff --git a/test/CSSTransitionGroup-test.js b/test/CSSTransitionGroup-test.js
index 05ea6ed1..2776a8e0 100644
--- a/test/CSSTransitionGroup-test.js
+++ b/test/CSSTransitionGroup-test.js
@@ -12,9 +12,10 @@ describe('CSSTransitionGroup', () => {
let consoleErrorSpy;
function YoloTransition({ id, ...props }) {
+ const nodeRef = React.useRef()
return (
-
-
+
+
)
}
@@ -38,14 +39,16 @@ describe('CSSTransitionGroup', () => {
it('should clean-up silently after the timeout elapses', () => {
- let a = ReactDOM.render(
+ ReactDOM.render(
,
container,
);
- expect(ReactDOM.findDOMNode(a).childNodes.length).toBe(1);
+ const transitionGroupDiv = container.childNodes[0]
+
+ expect(transitionGroupDiv.childNodes.length).toBe(1);
ReactDOM.render(
@@ -53,9 +56,10 @@ describe('CSSTransitionGroup', () => {
,
container,
);
- expect(ReactDOM.findDOMNode(a).childNodes.length).toBe(2);
- expect(ReactDOM.findDOMNode(a).childNodes[0].id).toBe('two');
- expect(ReactDOM.findDOMNode(a).childNodes[1].id).toBe('one');
+
+ expect(transitionGroupDiv.childNodes.length).toBe(2);
+ expect(transitionGroupDiv.childNodes[0].id).toBe('two');
+ expect(transitionGroupDiv.childNodes[1].id).toBe('one');
jest.runAllTimers();
@@ -63,37 +67,46 @@ describe('CSSTransitionGroup', () => {
expect(consoleErrorSpy).not.toHaveBeenCalled();
// The leaving child has been removed
- expect(ReactDOM.findDOMNode(a).childNodes.length).toBe(1);
- expect(ReactDOM.findDOMNode(a).childNodes[0].id).toBe('two');
+ expect(transitionGroupDiv.childNodes.length).toBe(1);
+ expect(transitionGroupDiv.childNodes[0].id).toBe('two');
});
it('should keep both sets of DOM nodes around', () => {
- let a = ReactDOM.render(
+ ReactDOM.render(
,
container,
);
- expect(ReactDOM.findDOMNode(a).childNodes.length).toBe(1);
+
+ const transitionGroupDiv = container.childNodes[0]
+
+ expect(transitionGroupDiv.childNodes.length).toBe(1);
+
ReactDOM.render(
,
container,
);
- expect(ReactDOM.findDOMNode(a).childNodes.length).toBe(2);
- expect(ReactDOM.findDOMNode(a).childNodes[0].id).toBe('two');
- expect(ReactDOM.findDOMNode(a).childNodes[1].id).toBe('one');
+
+ expect(transitionGroupDiv.childNodes.length).toBe(2);
+ expect(transitionGroupDiv.childNodes[0].id).toBe('two');
+ expect(transitionGroupDiv.childNodes[1].id).toBe('one');
});
it('should switch transitionLeave from false to true', () => {
- let a = ReactDOM.render(
+ ReactDOM.render(
,
container,
);
- expect(ReactDOM.findDOMNode(a).childNodes.length).toBe(1);
+
+ const transitionGroupDiv = container.childNodes[0]
+
+ expect(transitionGroupDiv.childNodes.length).toBe(1);
+
ReactDOM.render(
@@ -102,16 +115,19 @@ describe('CSSTransitionGroup', () => {
);
jest.runAllTimers();
- expect(ReactDOM.findDOMNode(a).childNodes.length).toBe(1);
+
+ expect(transitionGroupDiv.childNodes.length).toBe(1);
+
ReactDOM.render(
,
container,
);
- expect(ReactDOM.findDOMNode(a).childNodes.length).toBe(2);
- expect(ReactDOM.findDOMNode(a).childNodes[0].id).toBe('three');
- expect(ReactDOM.findDOMNode(a).childNodes[1].id).toBe('two');
+
+ expect(transitionGroupDiv.childNodes.length).toBe(2);
+ expect(transitionGroupDiv.childNodes[0].id).toBe('three');
+ expect(transitionGroupDiv.childNodes[1].id).toBe('two');
});
@@ -147,41 +163,51 @@ describe('CSSTransitionGroup', () => {
});
it('should transition from one to null', () => {
- let a = ReactDOM.render(
+ ReactDOM.render(
,
container,
);
- expect(ReactDOM.findDOMNode(a).childNodes.length).toBe(1);
+
+ const transitionGroupDiv = container.childNodes[0]
+
+ expect(transitionGroupDiv.childNodes.length).toBe(1);
+
ReactDOM.render(
{null}
,
container,
);
+
// (Here, we expect the original child to stick around but test that no
// exception is thrown)
- expect(ReactDOM.findDOMNode(a).childNodes.length).toBe(1);
- expect(ReactDOM.findDOMNode(a).childNodes[0].id).toBe('one');
+ expect(transitionGroupDiv.childNodes.length).toBe(1);
+ expect(transitionGroupDiv.childNodes[0].id).toBe('one');
});
it('should transition from false to one', () => {
- let a = ReactDOM.render(
+ ReactDOM.render(
{false}
,
container,
);
- expect(ReactDOM.findDOMNode(a).childNodes.length).toBe(0);
+
+ const transitionGroupDiv = container.childNodes[0]
+
+ expect(transitionGroupDiv.childNodes.length).toBe(0);
+
ReactDOM.render(
,
container,
);
- expect(ReactDOM.findDOMNode(a).childNodes.length).toBe(1);
- expect(ReactDOM.findDOMNode(a).childNodes[0].id).toBe('one');
+
+ expect(transitionGroupDiv.childNodes.length).toBe(1);
+ expect(transitionGroupDiv.childNodes[0].id).toBe('one');
});
it('should clear transition timeouts when unmounted', () => {
@@ -272,9 +298,11 @@ describe('CSSTransitionGroup', () => {
}
}
- const a = ReactDOM.render(, container);
- const child = ReactDOM.findDOMNode(a).childNodes[0];
- expect(hasClass(child, extraClassNameProp)).toBe(true);
+ ReactDOM.render(, container);
+ const transitionGroupDiv = container.childNodes[0]
+ transitionGroupDiv.childNodes.forEach(child => {
+ expect(hasClass(child, extraClassNameProp)).toBe(true);
+ })
// Testing that no exception is thrown here, as the timeout has been cleared.
jest.runAllTimers();
diff --git a/test/SwitchTransition-test.js b/test/SwitchTransition-test.js
index 744e2967..76d2a527 100644
--- a/test/SwitchTransition-test.js
+++ b/test/SwitchTransition-test.js
@@ -10,20 +10,21 @@ describe('SwitchTransition', () => {
beforeEach(() => {
log = [];
let events = {
- onEnter: (_, m) => log.push(m ? 'appear' : 'enter'),
- onEntering: (_, m) => log.push(m ? 'appearing' : 'entering'),
- onEntered: (_, m) => log.push(m ? 'appeared' : 'entered'),
+ onEnter: (m) => log.push(m ? 'appear' : 'enter'),
+ onEntering: (m) => log.push(m ? 'appearing' : 'entering'),
+ onEntered: (m) => log.push(m ? 'appeared' : 'entered'),
onExit: () => log.push('exit'),
onExiting: () => log.push('exiting'),
onExited: () => log.push('exited')
};
+ const nodeRef = React.createRef()
Parent = function Parent({ on, rendered = true }) {
return (
{rendered ? (
-
-
+
+
) : null}
@@ -32,10 +33,11 @@ describe('SwitchTransition', () => {
});
it('should have default status ENTERED', () => {
+ const nodeRef = React.createRef()
const wrapper = mount(
-
-
+
+
);
@@ -44,10 +46,11 @@ describe('SwitchTransition', () => {
});
it('should have default mode: out-in', () => {
+ const nodeRef = React.createRef()
const wrapper = mount(
-
-
+
+
);
@@ -56,11 +59,12 @@ describe('SwitchTransition', () => {
});
it('should work without childs', () => {
+ const nodeRef = React.createRef()
expect(() => {
mount(
-
-
+
+
);
diff --git a/test/Transition-test.js b/test/Transition-test.js
index 63d30c0e..c3690fa3 100644
--- a/test/Transition-test.js
+++ b/test/Transition-test.js
@@ -26,15 +26,17 @@ expect.extend({
describe('Transition', () => {
it('should not transition on mount', () => {
+ const nodeRef = React.createRef()
let wrapper = mount(
{
throw new Error('should not Enter')
}}
>
-
+
)
@@ -42,21 +44,23 @@ describe('Transition', () => {
})
it('should transition on mount with `appear`', done => {
+ const nodeRef = React.createRef()
mount(
{
throw Error('Animated!')
}}
>
-
+
)
mount(
- done()}>
-
+ done()}>
+
)
})
@@ -64,14 +68,16 @@ describe('Transition', () => {
it('should pass filtered props to children', () => {
class Child extends React.Component {
render() {
- return child
+ return child
}
}
+ const nodeRef = React.createRef()
const child = mount(
{
onExiting={() => {}}
onExited={() => {}}
>
-
+
).find(Child)
- expect(child.props()).toEqual({ foo: 'foo', bar: 'bar' })
+ expect(child.props()).toEqual({ foo: 'foo', bar: 'bar', nodeRef })
})
it('should allow addEndListener instead of timeouts', done => {
- let listener = jest.fn((node, end) => setTimeout(end, 0))
+ let listener = jest.fn(end => setTimeout(end, 0))
- let inst = mount(
+ const nodeRef = React.createRef()
+ let wrapper = mount(
{
expect(listener).toHaveBeenCalledTimes(1)
done()
}}
>
-
+
)
- inst.setProps({ in: true })
+ wrapper.setProps({ in: true })
})
it('should fallback to timeouts with addEndListener', done => {
let calledEnd = false
- let listener = (node, end) =>
+ let listener = (end) =>
setTimeout(() => {
calledEnd = true
end()
}, 100)
- let inst = mount(
+ const nodeRef = React.createRef()
+ let wrapper = mount(
{
expect(calledEnd).toEqual(false)
done()
}}
>
-
+
)
- inst.setProps({ in: true })
+ wrapper.setProps({ in: true })
})
it('should mount/unmount immediately if not have enter/exit timeout', (done) => {
+ const nodeRef = React.createRef()
const wrapper = mount(
-
-
+
+
)
@@ -159,15 +170,45 @@ describe('Transition', () => {
})
})
+ it('should use `React.findDOMNode` when `nodeRef` is not provided', () => {
+ const consoleSpy = jest.spyOn(console, 'error').mockImplementation()
+ const findDOMNodeSpy = jest.spyOn(ReactDOM, 'findDOMNode')
+
+ mount(
+
+
+
+ )
+
+ expect(findDOMNodeSpy).toHaveBeenCalled();
+ findDOMNodeSpy.mockRestore()
+ consoleSpy.mockRestore()
+ })
+
+ it('should not use `React.findDOMNode` when `nodeRef` is provided', () => {
+ const findDOMNodeSpy = jest.spyOn(ReactDOM, 'findDOMNode')
+
+ const nodeRef = React.createRef()
+ mount(
+
+
+
+ )
+
+ expect(findDOMNodeSpy).not.toHaveBeenCalled();
+ findDOMNodeSpy.mockRestore()
+ })
+
describe('appearing timeout', () => {
it('should use enter timeout if appear not set', done => {
let calledBeforeEntered = false
setTimeout(() => {
calledBeforeEntered = true
}, 10)
+ const nodeRef = React.createRef()
const wrapper = mount(
-
-
+
+
)
@@ -183,9 +224,10 @@ describe('Transition', () => {
})
it('should use appear timeout if appear is set', done => {
+ const nodeRef = React.createRef()
const wrapper = mount(
-
-
+
+
)
@@ -207,12 +249,13 @@ describe('Transition', () => {
})
describe('entering', () => {
- let wrapper
+ let wrapper, nodeRef;
beforeEach(() => {
+ nodeRef = React.createRef()
wrapper = mount(
-
-
+
+
)
})
@@ -268,12 +311,13 @@ describe('Transition', () => {
})
describe('exiting', () => {
- let wrapper
+ let wrapper, nodeRef;
beforeEach(() => {
+ nodeRef = React.createRef()
wrapper = mount(
-
-
+
+
)
})
@@ -330,10 +374,8 @@ describe('Transition', () => {
describe('mountOnEnter', () => {
class MountTransition extends React.Component {
- constructor(props) {
- super(props)
- this.state = { in: props.initialIn }
- }
+ nodeRef = React.createRef()
+ state = { in: this.props.initialIn }
render() {
const { ...props } = this.props
@@ -342,12 +384,13 @@ describe('Transition', () => {
return (
this.transition = this.transition || transition}
+ nodeRef={this.nodeRef}
mountOnEnter
in={this.state.in}
timeout={10}
{...props}
>
-
+
)
}
@@ -363,7 +406,7 @@ describe('Transition', () => {
initialIn={false}
onEnter={() => {
expect(wrapper.instance().getStatus()).toEqual(EXITED)
- expect(wrapper.getDOMNode()).toExist()
+ expect(wrapper.instance().nodeRef.current).toExist()
done()
}}
/>
@@ -371,7 +414,7 @@ describe('Transition', () => {
expect(wrapper.instance().getStatus()).toEqual(UNMOUNTED)
- expect(wrapper.getDOMNode()).not.toExist()
+ expect(wrapper.instance().nodeRef.current).not.toExist()
wrapper.setProps({ in: true })
})
@@ -382,31 +425,28 @@ describe('Transition', () => {
initialIn={false}
onEntered={() => {
expect(wrapper.instance().getStatus()).toEqual(ENTERED)
- expect(wrapper.getDOMNode()).toExist()
+ expect(wrapper.instance().nodeRef.current).toExist()
wrapper.setState({ in: false })
}}
onExited={() => {
expect(wrapper.instance().getStatus()).toEqual(EXITED)
- expect(wrapper.getDOMNode()).toExist()
+ expect(wrapper.instance().nodeRef.current).toExist()
done()
}}
/>
)
- expect(wrapper.getDOMNode()).not.toExist()
+ expect(wrapper.instance().nodeRef.current).not.toExist()
wrapper.setState({ in: true })
})
})
describe('unmountOnExit', () => {
class UnmountTransition extends React.Component {
- constructor(props) {
- super(props)
-
- this.state = { in: props.initialIn }
- }
+ nodeRef = React.createRef()
+ state = { in: this.props.initialIn }
render() {
const { ...props } = this.props
@@ -415,12 +455,13 @@ describe('Transition', () => {
return (
this.transition = this.transition || transition}
+ nodeRef={this.nodeRef}
unmountOnExit
in={this.state.in}
timeout={10}
{...props}
>
-
+
)
}
@@ -431,42 +472,42 @@ describe('Transition', () => {
}
it('should mount when entering', done => {
- const wrapper = mount(
+ const instance = mount(
{
- expect(wrapper.getStatus()).toEqual(EXITED)
- expect(ReactDOM.findDOMNode(wrapper)).toExist()
+ expect(instance.getStatus()).toEqual(EXITED)
+ expect(instance.nodeRef.current).toExist()
done()
}}
/>
).instance()
- expect(wrapper.getStatus()).toEqual(UNMOUNTED)
- expect(ReactDOM.findDOMNode(wrapper)).toBeNull()
+ expect(instance.getStatus()).toEqual(UNMOUNTED)
+ expect(instance.nodeRef.current).toBeNull()
- wrapper.setState({ in: true })
+ instance.setState({ in: true })
})
it('should unmount after exiting', done => {
- const wrapper = mount(
+ const instance = mount(
{
setTimeout(() => {
- expect(wrapper.getStatus()).toEqual(UNMOUNTED)
- expect(ReactDOM.findDOMNode(wrapper)).not.toExist()
+ expect(instance.getStatus()).toEqual(UNMOUNTED)
+ expect(instance.nodeRef.current).not.toExist()
done()
})
}}
/>
).instance()
- expect(wrapper.getStatus()).toEqual(ENTERED)
- expect(ReactDOM.findDOMNode(wrapper)).toExist()
+ expect(instance.getStatus()).toEqual(ENTERED)
+ expect(instance.nodeRef.current).toExist()
- wrapper.setState({ in: false })
+ instance.setState({ in: false })
})
})
})
diff --git a/test/TransitionGroup-test.js b/test/TransitionGroup-test.js
index 9f453c9d..f921ae40 100644
--- a/test/TransitionGroup-test.js
+++ b/test/TransitionGroup-test.js
@@ -20,18 +20,19 @@ describe('TransitionGroup', () => {
log = []
let events = {
- onEnter: (_, m) => log.push(m ? 'appear' : 'enter'),
- onEntering: (_, m) => log.push(m ? 'appearing' : 'entering'),
- onEntered: (_, m) => log.push(m ? 'appeared' : 'entered'),
+ onEnter: (m) => log.push(m ? 'appear' : 'enter'),
+ onEntering: (m) => log.push(m ? 'appearing' : 'entering'),
+ onEntered: (m) => log.push(m ? 'appeared' : 'entered'),
onExit: () => log.push('exit'),
onExiting: () => log.push('exiting'),
onExited: () => log.push('exited'),
}
+ const nodeRef = React.createRef()
Child = function Child(props) {
return (
-
-
+
+
)
}
@@ -99,88 +100,4 @@ describe('TransitionGroup', () => {
jest.runAllTimers()
expect(log).toEqual(['exit', 'exiting', 'exited'])
})
-
- it('should not throw when enter callback is called and is now leaving', () => {
- class Child extends React.Component {
- componentWillReceiveProps() {
- if (this.callback) {
- this.callback()
- }
- }
-
- componentWillEnter(callback) {
- this.callback = callback
- }
-
- render() {
- return
- }
- }
-
- class Component extends React.Component {
- render() {
- return {this.props.children}
- }
- }
-
- // render the base component
- ReactDOM.render(, container)
- // now make the child enter
- ReactDOM.render(
-
-
- ,
- container
- )
- // rendering the child leaving will call 'componentWillProps' which will trigger the
- // callback. This would throw an error previously.
- expect(ReactDOM.render.bind(this, , container)).not.toThrow()
- })
-
- it('should not throw when leave callback is called and is now entering', () => {
- class Child extends React.Component {
- componentWillReceiveProps() {
- if (this.callback) {
- this.callback()
- }
- }
-
- componentWillLeave(callback) {
- this.callback = callback
- }
-
- render() {
- return
- }
- }
-
- class Component extends React.Component {
- render() {
- return {this.props.children}
- }
- }
-
- // render the base component
- ReactDOM.render(, container)
- // now make the child enter
- ReactDOM.render(
-
-
- ,
- container
- )
- // make the child leave
- ReactDOM.render(, container)
- // rendering the child entering again will call 'componentWillProps' which will trigger the
- // callback. This would throw an error previously.
- expect(
- ReactDOM.render.bind(
- this,
-
-
- ,
- container
- )
- ).not.toThrow()
- })
})
diff --git a/test/setup.js b/test/setup.js
index 4b7566f9..f053547a 100644
--- a/test/setup.js
+++ b/test/setup.js
@@ -1,3 +1,4 @@
+import React from 'react'
global.requestAnimationFrame = function(callback) {
setTimeout(callback, 0);
@@ -6,4 +7,7 @@ global.requestAnimationFrame = function(callback) {
const Enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-16');
-Enzyme.configure({ adapter: new Adapter() })
+Enzyme.configure({
+ adapter: new Adapter(),
+ wrappingComponent: props =>
+})
diff --git a/www/gatsby-config.js b/www/gatsby-config.js
index c665f06d..200b3664 100644
--- a/www/gatsby-config.js
+++ b/www/gatsby-config.js
@@ -19,6 +19,7 @@ module.exports = {
{
path: '/switch-transition',
displayName: 'SwitchTransition',
+ codeSandboxId: 'switchtransition-component-iqm0d',
},
{
path: '/transition-group',
diff --git a/www/src/components/Layout.js b/www/src/components/Layout.js
index 34aceb57..75f9c863 100644
--- a/www/src/components/Layout.js
+++ b/www/src/components/Layout.js
@@ -30,6 +30,7 @@ const Layout = ({ data, children }) => (
<>
+ React Transition Group
diff --git a/www/src/pages/testing.js b/www/src/pages/testing.js
index 47d20541..6448eb41 100644
--- a/www/src/pages/testing.js
+++ b/www/src/pages/testing.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
import React from 'react';
import { Container } from 'react-bootstrap';
import Layout from '../components/Layout';
-import Example from '../components/Example';
const propTypes = {
location: PropTypes.object.isRequired,
diff --git a/www/src/templates/component.js b/www/src/templates/component.js
index 3d44607e..7f98a60a 100644
--- a/www/src/templates/component.js
+++ b/www/src/templates/component.js
@@ -61,18 +61,16 @@ class ComponentTemplate extends React.Component {
-
- {codeSandboxId != null && (
-
- )}
+ {codeSandboxId != null && (
+
+ )}
-