Styjun

I am unit testing my react component using renderer of react-test-renderer. it was working fine, but after using ReactCssTransitionGroup I am getting the following error "TypeError: Cannot read property 'baseVal' of undefined". not sure how to resolve this issue

I verified this issue is caused by ReactCssTransitionGroup

Below is my component file:

import React from 'react';
import PropTypes from 'prop-types';
import List, ListItem, Spinner from '@stores/reactCommon';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

import BagListItem from './bag-list-item';

const BagList = (bagList, loading) => 
 const items = bagList.map((item, key) => (
 <ListItem key=key>
 <BagListItem
 upc=item.upc
 price=item.sellingPrice
 description=item.description
 />
 </ListItem>
 ));
 return (
 <div className="bag-list">
 loading ? (
 <span className="bag-list__spinner">
 <Spinner size="extra-large" />
 </span>
 ) : null
 <div className="bag-list__story-default-spacer">
 <List maxHeight="70vh">
 <ReactCSSTransitionGroup
 transitionName="bagList"
 transitionAppear=true
 transitionAppearTimeout=500
 transitionEnterTimeout=500
 transitionLeaveTimeout=300
 >
 items
 </ReactCSSTransitionGroup>
 </List>
 </div>
 </div>
 );
;

BagList.propTypes = 
 bagList: PropTypes.array.isRequired,
 loading: PropTypes.bool
;

export default BagList;

Below is my unit test file

import React from 'react';
import renderer from 'react-test-renderer';
import BagList from '../../../../src/client/js/components/bag-list/bag-list';

describe('<BagList />', function() 
 this.items = [
 
 upc: '123222123',
 sellingPrice: '12',
 description: 'this is a description'
 ,
 
 upc: '555123',
 price: '23',
 description: 'this is a description'
 
 ];
 this.getComponent = items => 
 return <BagList bagList=items loading=false />;
 ;

 it('Should render <BagList /> with bagList', () => 
 // this line is generating the error
 const items = renderer.create(this.getComponent(this.items)).toJSON();
 expect(items).toMatchSnapshot();
 );
);

react-addons-css-transition-group is an old package that was deprecated in favor of react-transition-group.

v1 of react-transition-group was a drop-in replacement, but it was rewritten in v2.

You'll probably want to move to CSSTransition from the latest react-transition-group.

Having said that, the error is coming from this code:

function hasClass(element, className) 
 if (element.classList) return !!className && element.classList.contains(className);else return (" " + (element.className.baseVal 

...in the hasClass.js module from the dom-helpers package included with the old react-addons-css-transition-group.

react-test-renderer...

...provides an experimental React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment

...so it doesn't implement everything provided by the DOM.

In this case it looks like react-test-renderer is not providing an implementation of classList on an element so calling element.className.baseVal throws the error you are seeing.