如何在Jest / Enzyme上测试子组件

时间:2019-01-16 20:40:28

标签: javascript reactjs unit-testing jestjs enzyme

我正在尝试测试子组件,因为测试覆盖范围表明我缺少它。

这是组件:

"rules": 
{
         ".read": true,
         ".write": true,
}

我正在尝试测试import React from 'react'; import PropTypes from 'prop-types'; import { map, keys, pick } from 'lodash'; import TableExpandedRowItem from './TableExpandedRow'; const TableExpandedRowWrapper = ({ rowClassProp, shipmentItem }) => { const itemKeys = pick(shipmentItem, [ 'description', 'originationAddress', 'receivingAddress', ]); return ( <div className={rowClassProp}> {map(keys(itemKeys), itemKey => ( <TableExpandedRowItem key={shipmentItem[itemKey]} dataTitle={shipmentItem[itemKey]} rowValue={shipmentItem[itemKey]} /> ))} </div> ); }; TableExpandedRowWrapper.propTypes = { rowClassProp: PropTypes.string, shipmentItem: PropTypes.shape({ id: PropTypes.string, }).isRequired, }; TableExpandedRowWrapper.defaultProps = { rowClassProp: 'row', }; export default TableExpandedRowWrapper; ,但它的长度为TableExpandedRowItem

这是我到目前为止的测试:

0

这是整个错误:

import React from 'react';
import { shallow, mount } from 'enzyme';
import TableExpandedRowWrapper from '../../TableExpandedRowWrapper';
import TableExpandedRowItem from '../../TableExpandedRow';

describe('TableExpandedRowWrapper component', () => {
  let props;

  beforeEach(() => {
    props = {
      rowClassProp: 'row',
      shipmentItem: {},
    };
  });

  it('renders TableExpandedRowWrapper', () => {
    const wrapper = mount(<TableExpandedRowWrapper {...props} />);

    expect(TableExpandedRowWrapper).toBeDefined();
    expect(wrapper.find('.row')).toHaveLength(1);
    expect(TableExpandedRowItem).toBeDefined();
    expect(wrapper.find(TableExpandedRowItem)).toHaveLength(1);
  });
});

有什么想法吗?

1 个答案:

答案 0 :(得分:1)

我看不到TableExpandedRowItem的定义,但我的第一个猜测是初始道具不应包含空的DECLARE @i int = 1; EXEC sp_executesql N'SELECT @n;', N'@n int', @n = @i; 对象,而实际上应包含一些键。

您正在测试中安装组件,因此它应该呈示其子级,但是如果从输出中看到此片段,则很明显,未呈示该子级shipmentItem

尝试在"rendered": {"instance": <div class="row" />, "key": undefined, "nodeType": "host", "props": {"children": [], "className": "row"}, "ref": null...中添加一些虚拟数据。