Import is undefined in Jest snapshot test

Viewed 589

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?

0 Answers
Related