Testing reduxForm component methods with jest and enzyme - reactjs

Question

I'm testing a reduxForm component with jest and enzyme and I don't know how i can test methods within this component.
I'm exporting the component and testing it itself, I have access to the methods but the component don't recognize the reduxForm field props like meta, touched, error, input e.t.c.
How I can mock these or test my component with reduxForm, not as a separate one
The tested component is Login component and must render 2 fields.
This is the Login component:
import React, { Component } from 'react'
//import { Link } from 'react-router-dom'
import { Field, reduxForm } from 'redux-form'
import '../../style/style.css'
export class Login extends Component {
renderField(field) {
const { meta: { touched, error} } = field;
const className = `form-group ${touched && error ? 'has-danger' : ''}`;
return (
<div className={className}>
<input className="form-control" id="username_field" placeholder={field.label} type="text" {...field.input} />
<div className="text-help">
{ field.meta.touched ? field.meta.error : '' }
</div>
</div>
)
}
renderPasswordField(field) {
const { meta: { touched, error} } = field;
const className = `form-group ${touched && error ? 'has-danger' : ''}`;
return (
<div className={className}>
<input className="form-control" id="password_field" placeholder={field.label} type="password" {...field.input} />
<div className="text-help">
{ field.meta.touched ? field.meta.error : '' }
</div>
</div>
)
}
onSubmit(values) {
this.props.history.push('/landing')
}
render() {
const { handleSubmit } = this.props
return (
<div>
<div className="login-form">
<form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
<h2 className="text-center">TQI Log in</h2>
<div className="form-group">
<Field id="username" name="username" label="username" component={this.renderField} />
</div>
<div className="form-group">
<Field id="password" name="password" label="password" component={this.renderPasswordField} />
</div>
<div className="form-group">
<button id="login_button" type="submit" className="btn btn-primary btn-block btn-clicked">Login </button>
</div>
</form>
</div>
</div>
);
}
}
export const validate = (values) => {
const errors = {}
const dummyData = {
username: 'admin',
password: 'admin'
}
// Validate the inputs from values
if(!values.username) {
errors.username = "Enter a username"
} else if(values.username !== dummyData.username){
errors.username = "Wrong username"
}
if(!values.password) {
errors.password = "Enter a password"
} else if( values.username === dummyData.username && values.password !== dummyData.password){
errors.password = "Wrong password"
}
// if errors is empty, the form is fine to submit
// If errors has *any* properties, redux forms assumes form is invalid
return errors
}
export default reduxForm({
validate,
form: 'LoginForm'
})(Login)
This is the testing file:
import React from 'react'
import { shallow, mount } from 'enzyme'
import { Login } from '../../components/login/login'
import { validate } from '../../components/login/login'
const mockHandleSubmit = jest.fn()
const renderField = jest.fn()
const mockRenderPasswordField = jest.fn()
const wrapper = shallow(<Login handleSubmit={mockHandleSubmit} />)
const loginButton = wrapper.find('#login_button')
describe('<Login /> render', () => {
it('render the <Login /> component without crashing', () => {
expect(wrapper.length).toEqual(1)
})
it(' call handlesSubmit when submit button is clicked', () => {
loginButton.simulate('click')
expect(mockHandleSubmit).toHaveBeenCalled()
})
})
describe('renderField and renderPasswordField functions', () => {
it('renderField', () => {
expect(wrapper.instance().renderField()).toEqual(1)
})
})
And the error it gives me

Answer 1

To mount a reduxForm wrapped component, you need to wrap your component in
mount(
<Provider store={store}>
<Login {...props}/>
</Provider>
)
note that you need to create a custom store beforehand like this
import { createStore, combineReducers } from 'redux'
import { Provider } from 'react-redux'
store = createStore(combineReducers({ form: formReducer }))
You may refer to this repo for how to test redux form properly with integration and unit tests.
https://github.com/tylercollier/redux-form-test