I'm using Jest and Enzyme to snapshot test a component that uses CSSTransition from react-transition-group (v2.1.0). When I create a snapshot of the component, CSSTransition appears undefined. This causes React to throw a warning:
Warning: React.createElement: type is invalid -- expected a string
(for built-in components) or a class/function (for composite components) but got:
undefined. You likely forgot to export your component
from the file it's defined in.
Here is the broken snapshot diff:
- <CSSTransitionGroup
- transitionAppear={false}
- transitionEnter={true}
- transitionEnterTimeout={150}
- transitionLeave={true}
- transitionLeaveTimeout={150}
- transitionName="fade"
- />
+ <undefined
+ classNames="fade"
+ in={false}
+ mountOnEnter={true}
+ timeout={150}
+ unmountOnExit={true}
+ >
+ <div
+ className="shadow"
+ onClick={[Function]}
+ />
+ </undefined>
The error first appeared when I upgraded from react-transition-group v1.2.0 to v2.1.0. Here's the relevant part of the commit that first caused the break to appear:
-import { CSSTransitionGroup } from 'react-transition-group';
+import CSSTransition from 'react-transition-group/CSSTransition';
- <CSSTransitionGroup
- transitionName='fade'
- transitionEnterTimeout={150}
- transitionLeaveTimeout={150}
+ <CSSTransition
+ in={!!this.state.selectedCategory}
+ classNames='fade'
+ timeout={150}
+ mountOnEnter
+ unmountOnExit
>
- { this.state.selectedCategory &&
<div key='shadow' className='shadow' onClick={this.handleCancel} />
- }
- </CSSTransitionGroup>
+ </CSSTransition>
Anyone have any ideas what's causing this?