Testing 此.props.children.map在用酶测试反应成分时不是函数_Testing_Reactjs_Jsdom_Enzyme

Testing 此.props.children.map在用酶测试反应成分时不是函数

testing reactjs

Testing 此.props.children.map在用酶测试反应成分时不是函数,testing,reactjs,jsdom,enzyme,Testing,Reactjs,Jsdom,Enzyme,我有一个React组件，它还使用this.props.children使用它的子组件： import classnames from 'classnames'; import React from 'react'; export default function Toolbar(props) { return <ul className="sulu-Toolbar">{props.children}</ul>; } Toolbar.Item = class e

我有一个React组件，它还使用

this.props.children

使用它的子组件：

import classnames from 'classnames';
import React from 'react';

export default function Toolbar(props) {
    return <ul className="sulu-Toolbar">{props.children}</ul>;
}

Toolbar.Item = class extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            open : false
        };
    }

    static propTypes = {
        title: React.PropTypes.string,
        isChild: React.PropTypes.bool
    };

    static defaultProps = {
        title: '',
        isChild: false
    };

    render() {
        var classNames = classnames({
            'sulu-Toolbar-Item': !this.props.isChild,
            'sulu-Toolbar-Item-Dropdown-Item': this.props.isChild
        });

        return <li className={classNames} onClick={this.onClick}>
            {this.props.title} {this.props.children ? <span className="sulu-Toolbar-Item-Arrow"/> : ''}
            {!!this.props.children ? this.getChildren() : ''}
        </li>;
    }

    getChildren = () => {
        var children = null;

        if (!!this.state.open) {
            children = <ul className="sulu-Toolbar-Item-Dropdown">
                {
                    this.props.children.map((child) => {
                        return <Toolbar.Item {...child.props} key={child.key} isChild={true}/>;
                    })
                }
            </ul>;
        }

        return children;
    };

    onClick = () => {
        !!this.props.children ? this.toggleOpen() : this.props.onClick();
    };

    toggleOpen = () => {
        this.setState({open: !this.state.open});
    };
};

我曾尝试使用

装载和浅装，当然我更喜欢浅装。但这两个函数并不像我所期望的那样工作。对于mount
我也使用jsdom，测试中包含以下setup.js
脚本：
import {mount, shallow} from 'enzyme';
import React from 'react';
import test from 'tape';

import Toolbar from '../src/toolbar';

import './setup.js';

test('Toolbar item should open and close', (t) => {
    const toolbarItem = mount(<Toolbar.Item><Toolbar.Item/></Toolbar.Item>);

    t.test('Toolbar item should open', (t) => {
        t.plan(1);
        toolbarItem.find('li').simulate('click');
        t.equals(toolbarItem.find('p').length, 1);
    });

    t.test('Toolbar item should close', (t) => {
        t.plan(1);
        toolbarItem.find('li').simulate('click');
        t.equals(toolbarItem.find('p').length, 0);
    });
});

test('Toolbar item should execute onclick handler', (t) => {
    t.plan(1);

    const toolbarItem = shallow(<Toolbar.Item onClick={() => {t.ok(true)}}/>);

    toolbarItem.find('li').simulate('click');
});

test ('Toolbar item should show title', (t) => {
    t.plan(1);

    const toolbarItem = shallow(<Toolbar.Item title="Test"/>);

    t.ok(toolbarItem.contains('Test'));
});

import jsdom from 'jsdom';

if (typeof document === 'undefined') {
    global.document = jsdom.jsdom('<html><body></body></html>');
    global.window = document.defaultView;
    global.navigator = window.navigator;
}

{ '$$typeof': Symbol(react.element),
  type:
   { [Function: _class]
     propTypes: { title: [Object], isChild: [Object] },
     defaultProps: { title: '', isChild: false } },
  key: null,
  ref: null,
  props: { title: '', isChild: false },
  _owner: null,
  _store: {} }

我想在这里添加小的验证if（！！this.state.open）{
。像这样if（！！this.state.open&&Array.isArray（this.props.children））{
你能记录这个.props.children吗？我相信如果只有一个，map就不起作用了？问题是props.children是空的..所以有些时候组件没有children.调试一下.阿鲁尼奥夫：这不是一个好主意，因为这样测试就不会检查元素是否真的存在.乔丹·亨德里克斯：我更新了这个问题哈迪：它不是空的，看到答案了吗
{ '$$typeof': Symbol(react.element),
  type:
   { [Function: _class]
     propTypes: { title: [Object], isChild: [Object] },
     defaultProps: { title: '', isChild: false } },
  key: null,
  ref: null,
  props: { title: '', isChild: false },
  _owner: null,
  _store: {} }