Question

我有一个简单的组件可以切换排序。单击链接时，将触发一个函数。当我在其上运行shallow()时，我收到类似

的错误

错误：此方法仅适用于在单个节点上运行。找到0

我的组件是：

import React, { Component, PropTypes } from 'react';
import { sortGames } from '../actions';
import { connect } from 'react-redux';


class SortList extends Component {
    constructor(props) {
        super(props);
        this.onSortGames = this.props.onSortGames.bind(this);
    }
    componentWillMount(){
        this.setState({
            sortByIncrease: false
        })
    }
    render() {
        return (
            <div className="sort">
                <span>Sort by:
                    <a href="#" onClick={e => {
                        e.preventDefault();
                        this.props.onSortGames(this.props.filter, this.state.sortByIncrease);
                        this.setState({
                            sortByIncrease: !this.state.sortByIncrease
                        });
                    }}>
                        { (this.state.sortByIncrease) ? "Decrease" : "Increase" }
                    </a>
                </span>
            </div>
        )
    }
}

SortList.propTypes = {
    onSortGames: PropTypes.func.isRequired
};

const mapStateToProps = (state) => ({
    games: state.games
});
const mapDispatchToProps = (dispatch) => ({
    onSortGames(filter, asc) {
        dispatch(sortGames(filter, asc));
    }
});

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(SortList);

这是我的测试脚本：

import React from 'react';
import {expect} from 'chai';
import { shallow, mount } from 'enzyme';
import sinon from 'sinon';
import SortList from '../components/SortList';
import configureStore from '../configureStore';

describe('SortList', () => {
    const store = configureStore();

    const props = {
        filter: "all",
        sortByIncrease: false,
        onSortGames : (a,b) => {}
    };

    it('should render sort list component', () => {
        const wrapper = shallow(<SortList {...props} store={store}></SortList>);
        expect(wrapper.length).to.equal(1);
    });

    it('should call sorting function when clicked', () => {
        const onSortGames = sinon.spy();
        const wrapper = shallow(<SortList {...props} store={store}></SortList>);
        console.log(wrapper.debug());
        wrapper.find('a').simulate('click');
        expect(onSortGames.calledOnce).to.equal(true);
    });
});

console.log(wrapper.debug());语句打印

<SortList filter="all" sortByIncrease={false} onSortGames={[Function]} store={{...}} games={{...}} />

我做错了什么？它必须达到a标签，我相信，但仍然......

Answer 1

我发现浅层无法在连接的组件上找到子元素，因此它们分别导出组件和连接组件。以下是他们对redux示例treeview example node component

的处理方式

所以我改变了我的组件，如

    class SortList extends Component {

到

    export class SortList extends Component {

和

    export default connect(
      mapStateToProps,
      mapDispatchToProps
    )(SortList);

到

    const SortListConnected = export default connect(
      mapStateToProps,
      mapDispatchToProps
    )(SortList);
    export default SortListConnected;

将我的测试脚本导入更改为

    import {SortList} from '../components/SortList';

之后，find（）效果很好。

Answer 2

你正在创建一个sinon间谍，但没有将它引入你的shallow函数。在将onSortGames间谍传递给组件之前，需要将其传递给道具。目前，当您点击它时，只需调用您在describe子句onSortGames : (a,b) => {}中的属性中列出的功能。

尝试直接将间谍应用于JSX，例如：

  it('should call sorting function when clicked', () => {
        const onSortGames = sinon.spy();
        const wrapper = shallow(<SortList onSortGames={onSortGames} {...props} store={store}></SortList>);
        console.log(wrapper.debug());
        wrapper.find('a').simulate('click');
        expect(onSortGames.calledOnce).to.equal(true);
    });

“此方法仅适用于在单个节点上运行。而是找到了0”“酶错误

2 个答案: