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

Question

我正在尝试测试子组件，因为测试覆盖率表明我缺少它。

这是组件：

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

这是整个错误：

 FAIL  src/client/pages/Shipments/__tests__/components/TableExpandedRowWrapper-test.js
  TableExpandedRowWrapper component
    ✕ renders TableExpandedRowWrapper (58ms)

  ● TableExpandedRowWrapper component › renders TableExpandedRowWrapper

    expect(received).toHaveLength(length)

    Expected value to have length:
      1
    Received:
      {Symbol(enzyme.__unrendered__): null, Symbol(enzyme.__renderer__): {"batchedUpdates": [Function batchedUpdates], "getNode": [Function getNode], "render": [Function render], "simulateError": [Function simulateError], "simulateEvent": [Function simulateEvent], "unmount": [Function unmount]}, Symbol(enzyme.__root__): {Symbol(enzyme.__unrendered__): <TableExpandedRowWrapper rowClassProp="row" shipmentItem={{}} />, Symbol(enzyme.__renderer__): {"batchedUpdates": [Function batchedUpdates], "getNode": [Function getNode], "render": [Function render], "simulateError": [Function simulateError], "simulateEvent": [Function simulateEvent], "unmount": [Function unmount]}, Symbol(enzyme.__root__): [Circular], Symbol(enzyme.__node__): {"instance": null, "key": undefined, "nodeType": "function", "props": {"rowClassProp": "row", "shipmentItem": {}}, "ref": null, "rendered": {"instance": <div class="row" />, "key": undefined, "nodeType": "host", "props": {"children": [], "className": "row"}, "ref": null, "rendered": [[]], "type": "div"}, "type": [Function TableExpandedRowWrapper]}, Symbol(enzyme.__nodes__): [{"instance": null, "key": undefined, "nodeType": "function", "props": {"rowClassProp": "row", "shipmentItem": {}}, "ref": null, "rendered": {"instance": <div class="row" />, "key": undefined, "nodeType": "host", "props": {"children": [], "className": "row"}, "ref": null, "rendered": [[]], "type": "div"}, "type": [Function TableExpandedRowWrapper]}], Symbol(enzyme.__options__): {"adapter": {"options": {"enableComponentDidUpdateOnSetState": true, "lifecycles": {"componentDidUpdate": {"onSetState": true}, "getDerivedStateFromProps": true, "getSnapshotBeforeUpdate": true, "setState": {"skipsComponentDidUpdateOnNullish": true}}}}}}, Symbol(enzyme.__node__): undefined, Symbol(enzyme.__nodes__): [], Symbol(enzyme.__rootNodes__): [{"instance": null, "key": undefined, "nodeType": "function", "props": {"rowClassProp": "row", "shipmentItem": {}}, "ref": null, "rendered": {"instance": <div class="row" />, "key": undefined, "nodeType": "host", "props": {"children": [], "className": "row"}, "ref": null, "rendered": [[]], "type": "div"}, "type": [Function TableExpandedRowWrapper]}], Symbol(enzyme.__options__): {"adapter": {"options": {"enableComponentDidUpdateOnSetState": true, "lifecycles": {"componentDidUpdate": {"onSetState": true}, "getDerivedStateFromProps": true, "getSnapshotBeforeUpdate": true, "setState": {"skipsComponentDidUpdateOnNullish": true}}}}}}
    received.length:
      0

      20 |     expect(wrapper.find('.row')).toHaveLength(1);
      21 |     expect(TableExpandedRowItem).toBeDefined();
    > 22 |     expect(wrapper.find(TableExpandedRowItem)).toHaveLength(1);
         |                                                ^
      23 |   });
      24 | });
      25 | 

      at Object.toHaveLength (src/client/pages/Shipments/__tests__/components/TableExpandedRowWrapper-test.js:22:48)

有什么想法吗？

Answer 1

我看不到TableExpandedRowItem的定义，但我的第一个猜测是，初始props不应该包含空的shipmentItem对象，但它实际上应该包含一些键。

您将在测试中挂载组件，因此它应该呈现其子组件，但如果您从输出中看到这一部分，则很明显该子组件未呈现为"rendered": {"instance": <div class="row" />, "key": undefined, "nodeType": "host", "props": {"children": [], "className": "row"}, "ref": null...

尝试在shipmentItem中添加一些虚拟数据。