TypeError: Cannot read property 'baseVal' of undefined

Question

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();
  });
});

Featherbedding

can you either paste the full stack trace, or paste the piece of code where you read myObj.baseVal ? – Maribeth

Answer 1

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 || element.className) + " ").indexOf(" " + className + " ") !== -1;
}

...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.

Greenlet

First of all thanks for your feedback. Now I have updated my code to "react-transition-group" v4 the previous error is resolved, but now I am getting a new error "TypeError: element.setAttribute is not a function" – Featherbedding

Answer 2

I faced the same error but it's produced by another scenario, my formatter added space after the JSX element {" "} in the Routes file (React Router DOM) causing the white screen of death .

<JSX.Element />{" "}

After removing the space the white screen of death and the error disappear.

Slattery