Javascript 模拟后Jest/酶测试失败（'submit'）“this.props.searchUser不是函数”

失败客户端/containers/Users/userlistcainer.test.js ● 测试›应在用户搜索后显示用户

预期 模拟单击后，在容器中查找2个li的测试应通过

后果 Getting>this.props.searchUser不是一个函数

userListContainer.js 测试代码

---

您需要在测试中向UserListContainer传递道具，包括searchUser函数。连接无法在测试中为您获取它。阿布拉莫夫本人实际上建议你不要测试连接

---

如果我可以建议的话，您最好让这个测试更像“单元”。例如，您可以浅装UserList并模拟单击，只需监视函数以确保调用它。然后你可以用不同的道具再次浅装它，以模拟发生的任何变化。同样，在您的容器中，您可以只调用onFormSubmit并确保调用了searchUser。

您需要在测试中向UserListContainer传递道具，包括searchUser函数。连接无法在测试中为您获取它。阿布拉莫夫本人实际上建议你不要测试连接

---

如果我可以建议的话，您最好让这个测试更像“单元”。例如，您可以浅装UserList并模拟单击，只需监视函数以确保调用它。然后你可以用不同的道具再次浅装它，以模拟发生的任何变化。同样，在您的容器中，您可以调用onFormSubmit并确保调用了searchUser。

谢谢，检查此答案，因为我不再收到错误this.props.searchUser不是一个函数，但是我得到的是一个巨大的对象，而不是预期的2 li。我在问题的底部添加了一个屏幕截图来说明我的意思。如果你有更多的时间，这里还有一个新问题！谢谢，检查这个答案，因为我不再得到错误this.props.searchUser不是一个函数，但是我得到的是一个巨大的对象，而不是预期的2 li。我在问题的底部添加了一个屏幕截图来说明我的意思。如果你有更多的时间，这里还有一个新问题！

import React, { Component } from "react"
import { connect } from 'react-redux'

import { UserList } from '../../components'

// Actions
import { searchUser } from '../../actions'

export class UserListContainer extends Component {
    constructor(props) {
        super(props);
    }

    onFormSubmit(e, user) {
        e.preventDefault();
        this.props.searchUser(user)
    }

    render() {
        return (
            <div className='users-container'>
                <UserList
                    users={this.props.users}
                    lastUserSearched={this.props.lastUserSearched}
                    onFormSubmit={this.onFormSubmit.bind(this)}
                />
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        users: state.usersReducer.users,
        lastUserSearched: state.usersReducer.lastUserSearched
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        searchUser: (user) => {dispatch(searchUser(user))},
    }
}

const userList = UserListContainer;
export default connect(mapStateToProps, mapDispatchToProps)(userList)

import * as actionTypes from '../../actionTypes'

export const searchUser = (user) => ({
  type: actionTypes.SEARCH_USER,
  payload: user
});

import React from 'react'
import * as enzyme from 'enzyme'
import { shallow, mount } from 'enzyme'
import toJson from 'enzyme-to-json'
import { UserListContainer } from './UserListContainer'
import userList from './UserListContainer'

const userListContainer = shallow(<UserListContainer />);

describe('<UserListContainer /> tests', () => {
    let wrapper;

    beforeAll(() => {
        wrapper = mount(<UserListContainer />);
    });

    it('Should render', () => {
        const tree = toJson(userList);
        expect(tree).toMatchSnapshot();
    });

    it('Should show User after a user searches', () => {
        wrapper.find('form label input').get(0).value = "ni";
        // console.log('wrapper', wrapper)
        wrapper.find('form label button.btn-blue').simulate('submit');
        expect(wrapper.find('ul li')).toHaveLength(2);
    });
});

 beforeAll(() => {
    wrapper = mount(<UserListContainer searchUser={() => {}} />);
 });