Reactjs TypeError:无法读取属性';baseVal';未定义的

Reactjs TypeError:无法读取属性';baseVal';未定义的,reactjs,unit-testing,jestjs,reactcsstransitiongroup,react-test-renderer,Reactjs,Unit Testing,Jestjs,Reactcsstransitiongroup,React Test Renderer,我正在使用react-test渲染器的渲染器对我的react组件进行单元测试。它工作得很好,但是在使用ReactCSTransationGroup之后,我得到了以下错误“TypeError:无法读取未定义的属性'baseVal'。不知道如何解决这个问题 我已验证此问题是由ReactCSTranssitionGroup引起的 下面是我的组件文件: import React from 'react'; import PropTypes from 'prop-types'; import {List,

我正在使用react-test渲染器的渲染器对我的react组件进行单元测试。它工作得很好,但是在使用ReactCSTransationGroup之后,我得到了以下错误“TypeError:无法读取未定义的属性'baseVal'。不知道如何解决这个问题

我已验证此问题是由ReactCSTranssitionGroup引起的

下面是我的组件文件:

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;

从“React”导入React;
从“道具类型”导入道具类型;
从'@stores/reactCommon'导入{List,ListItem,Spinner};
从“react addons css转换组”导入ReactCSTranslationGroup;
从“/行李列表项”导入行李列表项;
常量BagList=({BagList,loading})=>{
const items=bagList.map((项,键)=>(
));
返回(
{加载(
):null}
{items}
);
};
BagList.propTypes={
行李列表:需要PropTypes.array.isRequired,
加载:PropTypes.bool
};
导出默认行李列表;
下面是我的单元测试文件

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”导入React;
从“反应测试渲染器”导入渲染器;
从“../../../../src/client/js/components/bag list/bag list”导入行李列表;
描述(“”,函数(){
此项。项目=[
{
upc:'123222123',
售价:'12',
描述:'这是一个描述'
},
{
upc:'555123',
价格:'23',
描述:'这是一个描述'
}
];
this.getComponent=items=>{
返回;
};
它('应该用bagList'呈现,()=>{
//该行正在生成错误
const items=renderer.create(this.getComponent(this.items)).toJSON();
expect(items).toMatchSnapshot();
});
});

react addons css过渡组
是一个支持
react过渡组的旧包

反应过渡组的v1替换率下降,但在v2中被重写

您可能希望从最新版本移动到


话虽如此,错误来自以下代码:

function hasClass(element, className) {
  if (element.classList) return !!className && element.classList.contains(className);else return (" " + (element.className.baseVal || element.className) + " ").indexOf(" " + className + " ") !== -1;
}
…在旧的
react addons css转换组中包含的
dom helpers
包中的
hasClass.js
模块中

react测试渲染器

…提供了一个实验性React渲染器,可用于将React组件渲染为纯JavaScript对象,而不依赖于DOM或本机移动环境

…所以它没有实现DOM提供的所有功能


在这种情况下,似乎
react test renderer
没有在
元素上提供
classList
的实现,因此调用
元素.className.baseVal
会抛出您看到的错误。

您可以粘贴完整堆栈跟踪,或者将代码粘贴到您阅读的地方
myObj.baseVal
?首先感谢您的反馈。现在,我已将代码更新为“react transition group”v4,以前的错误已解决,但现在我收到一个新错误“TypeError:element.setAttribute不是函数”