Как я могу проверить дочерний компонент на 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, но мое первое предположение состоит в том, что начальный реквизит не должен содержать пустой объект shipmentItem, но на самом деле он должен содержать некоторые ключи.

Вы монтируете компонент в тесте, поэтому он должен отображать его дочерние элементы, но если вы видите этот фрагмент из выходных данных, ясно, что дочерний элемент не был отображен "rendered": {"instance": <div class="row" />, "key": undefined, "nodeType": "host", "props": {"children": [], "className": "row"}, "ref": null...

Попробуйте добавить несколько фиктивных данных в shipmentItem.