我正在尝试测试一个子组件,因为测试范围说我缺少它。
这是组件:
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)
有什么想法吗?
最佳答案
我看不到 TableExpandedRowItem 的定义,但我的第一个猜测是初始属性不应包含空的 shipmentItem
。对象,但它实际上应该包含一些键。
您正在测试中安装组件,因此它应该渲染它的子项,但是如果您从输出中看到这一部分,很明显子项没有被渲染 "rendered": {"instance": <div class="row" />, "key": undefined, "nodeType": "host", "props": {"children": [], "className": "row"}, "ref": null...
尝试在 shipmentItem
中添加一些虚拟数据.
关于javascript - 如何在 Jest/Enzyme 上测试子组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54225023/