Jest/Enzyme 模拟后测试失败('submit')"this.props.searchUser is not a function"
Jest/Enzyme test failing after simulate('submit') "this.props.searchUser is not a function"
FAIL client/containers/Users/userListContainer.test.js
● tests › Should show User after a user searches
预计
模拟点击后,测试在容器中找到2里应该可以通过
结果
获取 > this.props.searchUser 不是函数
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);
});
});
您需要在测试中将道具传递给您的 UserListContainer
,包括您的 searchUser
函数。 connect
不会在您的测试中为您获取它。阿布拉莫夫本人实际上建议你不要测试 connect
beforeAll(() => {
wrapper = mount(<UserListContainer searchUser={() => {}} />);
});
如果我可以建议,你最好让这个测试更像 'unit'。例如,您可以 shallow
挂载 UserList
并模拟点击,只是监视函数以确保它被调用。然后,您可以使用不同的道具再次浅安装它,以模拟发生的任何变化。同样,在您的容器中,您可以只调用 onFormSubmit
并确保调用 searchUser
。
FAIL client/containers/Users/userListContainer.test.js ● tests › Should show User after a user searches
预计
模拟点击后,测试在容器中找到2里应该可以通过
结果
获取 > this.props.searchUser 不是函数
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);
});
});
您需要在测试中将道具传递给您的 UserListContainer
,包括您的 searchUser
函数。 connect
不会在您的测试中为您获取它。阿布拉莫夫本人实际上建议你不要测试 connect
beforeAll(() => {
wrapper = mount(<UserListContainer searchUser={() => {}} />);
});
如果我可以建议,你最好让这个测试更像 'unit'。例如,您可以 shallow
挂载 UserList
并模拟点击,只是监视函数以确保它被调用。然后,您可以使用不同的道具再次浅安装它,以模拟发生的任何变化。同样,在您的容器中,您可以只调用 onFormSubmit
并确保调用 searchUser
。