“此方法仅用于在单个节点上运行。找到 0 代替”酶错误

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 spy 传递给组件之前，您需要将其传递给 props。截至目前，当您单击它时，它只是调用您在describe 子句onSortGames : (a,b) => {} 的属性中列出的函数。

尝试直接将 spy 应用到 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);
    });