我正在使用react-test-renderer的渲染器对我的react组件进行单元测试。它工作正常,但在使用ReactCssTransitionGroup后,我收到以下错误"TypeError:无法读取未定义""得属性"baseVal."不确定如何解决此问题
我已验证此问题是由ReactCssTransitionGroup引起的
下面是我的组件文件:
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;
下面是我的单元测试文件
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();
});
});
2条答案
按热度按时间agxfikkp1#
react-addons-css-transition-group
是一个旧的软件包,它是deprecated,而react-transition-group
是它的支持者。react-transition-group
的v1是一个插入式替换,但它在v2中被重写。您可能希望从最新的
react-transition-group
迁移到CSSTransition
。话虽如此,错误还是来自于这段代码:
...在旧版
react-addons-css-transition-group
随附的dom-helpers
套件中的hasClass.js
模块中。react-test-renderer
......提供了一个实验性的React渲染器,可用于将React组件渲染为纯JavaScript对象,而不依赖于DOM或本机移动环境
...所以它并不实现DOM提供的所有内容。
在这种情况下,
react-test-renderer
似乎没有在element
上提供classList
的实现,因此调用element.className.baseVal
会引发您看到的错误。oymdgrw72#
我遇到了同样的错误,但它是由另一个场景产生的,我的格式化程序在Routes文件(React Router DOM)中的JSX元素{”“}后面添加了空格,导致了死亡的白色。
删除空间后,死亡的白色屏幕和错误消失。