Javascript 用酶反应截短

我正在为一个项目使用。带有展开折叠和省略号的基本设置应如下所示：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Truncate from 'react-truncate';

class ReadMore extends Component {
    constructor(...args) {
        super(...args);

        this.state = {
            expanded: false,
            truncated: false
        };

        this.handleTruncate = this.handleTruncate.bind(this);
        this.toggleLines = this.toggleLines.bind(this);
    }

    handleTruncate(truncated) {
        if (this.state.truncated !== truncated) {
            this.setState({
                truncated
            });
        }
    }

    toggleLines(event) {
        event.preventDefault();

        this.setState({
            expanded: !this.state.expanded
        });
    }

    render() {
        const {
            children,
            more,
            less,
            lines
        } = this.props;

        const {
            expanded,
            truncated
        } = this.state;

        return (
            <div>
                <Truncate
                    lines={!expanded && lines}
                    ellipsis={(
                        <span> <a href='#' onClick={this.toggleLines}>{more}</a></span>
                    )}
                    onTruncate={this.handleTruncate}
                >
                    {children}
                </Truncate>
                {!truncated && expanded && (
                    <span> <a href='#' onClick={this.toggleLines}>{less}</a></span>
                )}
            </div>
        );
    }
}

ReadMore.defaultProps = {
    lines: 3,
    more: 'Read more',
    less: 'Show less'
};

ReadMore.propTypes = {
    children: PropTypes.node.isRequired,
    text: PropTypes.node,
    lines: PropTypes.number
};

export default ReadMore;

const wrapper = mount(<Foo onClick={onClick} />); 
wrapper.find('span').simulate('click');

我不知道如何访问

readmore

span的

onClick

属性

基本上，我想要的是：

const wrapper = shallow(<ExpandCollapse />); // where above code is defined
expect(wrapper.state('expanded')).to.equal(false); // passes
//simulate onclick on Expand button 
expect(wrapper.state('expanded')).to.equal(true); // should pass
//then trigger onclick on Collapse button
expect(wrapper.state('expanded')).to.equal(false); // should pass

const wrapper=shallow（）；//其中定义了上述代码
expect（wrapper.state（'expanded'））.to.equal（false）；//通行证
//模拟单击展开按钮
expect（wrapper.state（'expanded'））.to.equal（true）；//应该通过
//然后触发一次单击折叠按钮
expect（wrapper.state（'expanded'））.to.equal（false）；//应该通过

---

关于如何继续这项工作有什么想法吗？提前谢谢

您正在寻找

模拟

从酶的角度来看：

我还没有这样做，所以我不能100%确定它是否有效。
如果你的
onClick
目标是一个子组件/在子组件内部，你将不得不使用
mount
，因为
shallow
只渲染一层深度

例如，它可以是这样的：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Truncate from 'react-truncate';

class ReadMore extends Component {
    constructor(...args) {
        super(...args);

        this.state = {
            expanded: false,
            truncated: false
        };

        this.handleTruncate = this.handleTruncate.bind(this);
        this.toggleLines = this.toggleLines.bind(this);
    }

    handleTruncate(truncated) {
        if (this.state.truncated !== truncated) {
            this.setState({
                truncated
            });
        }
    }

    toggleLines(event) {
        event.preventDefault();

        this.setState({
            expanded: !this.state.expanded
        });
    }

    render() {
        const {
            children,
            more,
            less,
            lines
        } = this.props;

        const {
            expanded,
            truncated
        } = this.state;

        return (
            <div>
                <Truncate
                    lines={!expanded && lines}
                    ellipsis={(
                        <span> <a href='#' onClick={this.toggleLines}>{more}</a></span>
                    )}
                    onTruncate={this.handleTruncate}
                >
                    {children}
                </Truncate>
                {!truncated && expanded && (
                    <span> <a href='#' onClick={this.toggleLines}>{less}</a></span>
                )}
            </div>
        );
    }
}

ReadMore.defaultProps = {
    lines: 3,
    more: 'Read more',
    less: 'Show less'
};

ReadMore.propTypes = {
    children: PropTypes.node.isRequired,
    text: PropTypes.node,
    lines: PropTypes.number
};

export default ReadMore;

const wrapper = mount(<Foo onClick={onClick} />); 
wrapper.find('span').simulate('click');

const wrapper=mount（）；
wrapper.find（'span'）.simulate（'click'）；
所以我试着按照你的建议去做，但是我得到了
ReferenceError:Truncate没有定义
然后我试着
wrapper.find（'div'）.dive（）.find（Truncate）.shall（）.find（'span'）.simulate（'click'）因为它被包装在一个
div
中，我得到了
TypeError:shallowRapper:：dive（）不能在主机组件上调用。我不明白为什么它找不到Truncate，调试显示了它的定义ID，你在测试文件中导入Truncate？是的，我找到了，它的所有助手常量也是。是的，你可能会有更多的机会使用mountGreat！我总是怀念一些简单的事情：）非常感谢。
wrapper.find(Truncate).shallow().find('span').simulate('click');

const wrapper = mount(<Foo onClick={onClick} />); 
wrapper.find('span').simulate('click');