代码之家  ›  专栏  ›  技术社区  ›  Leon Gaban

模拟(“提交”)后Jest/酶测试失败“this.props.searchUser不是函数”

  •  1
  • Leon Gaban  · 技术社区  · 7 年前

    客户端/containers/Users/userListContainer.test.js失败

    预期

    模拟点击后,在容器中找到2个李的测试应该通过

    后果

    userListContainer.js

    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);
        });
    });
    

    enter image description here

    1 回复  |  直到 7 年前
        1
  •  4
  •   Max Millington    7 年前

    你需要把道具传给你的 UserListContainer searchUser 作用这个 connect 不会在你的测试中得到它。阿布拉莫夫本人实际上建议你不要测试

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

    如果我可以建议的话,您最好让这个测试更像“单元”。例如,您可能 shallow UserList onFormSubmit 确保 搜索用户