Jest.js TypeError:无法读取未定义的属性'baseVal'

7xzttuei  于 2022-12-08  发布在  Jest
关注(0)|答案(2)|浏览(246)

我正在使用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();
  });
});
agxfikkp

agxfikkp1#

react-addons-css-transition-group是一个旧的软件包,它是deprecated,而react-transition-group是它的支持者。
react-transition-group的v1是一个插入式替换,但它在v2中被重写。
您可能希望从最新的react-transition-group迁移到CSSTransition
话虽如此,错误还是来自于这段代码:

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-transition-group随附的dom-helpers套件中的hasClass.js模块中。
react-test-renderer ...
...提供了一个实验性的React渲染器,可用于将React组件渲染为纯JavaScript对象,而不依赖于DOM或本机移动环境
...所以它并不实现DOM提供的所有内容。
在这种情况下,react-test-renderer似乎没有在element上提供classList的实现,因此调用element.className.baseVal会引发您看到的错误。

oymdgrw7

oymdgrw72#

我遇到了同样的错误,但它是由另一个场景产生的,我的格式化程序在Routes文件(React Router DOM)中的JSX元素{”“}后面添加了空格,导致了死亡的白色。

<JSX.Element />{" "}

删除空间后,死亡的白色屏幕和错误消失。

相关问题