Question

我正在使用react-truncate作为项目。具有展开 - 折叠和省略号的基本设置预计如下：

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 = shallow(<ReadMore />); // where above code is defined
expect(wrapper.state('expanded')).to.equal(false); // passes

但我坚持如何刺激expand click行为，我试过

wrapper.toggleLines; //返回undefined。

调试输出console.log(wrapper.debug());是

<div>
  <Truncate lines={3} ellipsis={{...}} onTruncate={[Function: bound handleTruncate]} trimWhitespace={false} />
</div>

我不确定如何访问onClick span

的Read more属性

基本上我要找的是：

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

有关如何继续这方面的任何想法？提前致谢。

Answer 1

如果您的onClick目标是子组件/子组件内的子组件，则必须使用mount，因为shallow只渲染一个级别。

例如，它可能是这样的：

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

Answer 2

您在寻找simulate吗？

来自README的酶：

const wrapper = shallow(<Foo onButtonClick={onButtonClick} />);
wrapper.find('button').simulate('click');

跨度在子组件中，这可能还不够。你可能有更多这样的机会：

wrapper.find(Truncate).shallow().find('span').simulate('click');

我还没有这样做，所以我不能100％确定它有效。

使用酶

2 个答案: