Cant access shallow rendered component when testing - 0 nodes found - reactjs

Question

I am trying to unit-test my React components using JEST and enzyme.
In this case I wanna test a redux-form component, so I tried following this guide:
https://github.com/tylercollier/redux-form-test/blob/master/tests/unit/index.js#L10
But I always get the error: Method “simulate” is only meant to be run on a single node. 0 found instead.
I realize that this is because it cant find the element that I am locating in .find('someElement'), but I cant figure out how to access it correctly. I have tried changing form in subject.find('form') to MenuInputFields and inputItemList, but the result is the same.
EDIT
I found that the error is present because the component is wrapped in a redux-form with:
MenuInputFields = reduxForm({
form: 'inputItemList',
validate
})(MenuInputFields)
Removing this makes it possible to somewhat test the component, however this is (of course) not optimal. When removing the connection with redux-forms I am able to access the form, but not any of the elements within it, accessing anything else than forms always yields the same error as I got before (shown further up).
I have changed the output of subject.debug() to the result after i removed the redux-form-wrapping, and now you can see that my fields are actually in the form, I just cant access them. I also update the testcases to show what works and what doesnt.
My Test:
import React from 'react'
import configureStore from 'redux-mock-store'
import Adapter from 'enzyme-adapter-react-15'
import * as sinon from 'sinon'
import * as Enzyme from 'enzyme'
import { Provider } from 'react-redux'
import { mount, shallow, render } from 'enzyme'
import { menuList } from '../../stubs/menuList'
import { MenuInputFields } from '../../components/adminMenuInputFields'
Enzyme.configure({ adapter: new Adapter() })
describe('<MenuInputFields />', () => {
let subject
let handleSubmit, pristine, reset, submitting, submitForm, touched, error
beforeEach(() => {
submitting = false
pristine = true
error = null
reset = sinon.spy()
handleSubmit = fn => fn
})
const buildSubject = () => {
submitForm = sinon.stub()
const props = {
submitForm,
initialValues: {
ClosingTime: '14:00',
MenuItems: {
FoodItem: 'test',
Description: 'test',
Price: '66'
}
},
handleSubmit,
reset
}
return shallow(<MenuInputFields {...props}/>)
}
//This works
it('it calls submitForm once when submitting', () => {
subject = buildSubject()
subject.find('form').simulate('submit')
expect(submitForm.calledOnce).toBeTruthy()
})
//This doesnt work
it('loads initial value of ClosingTime into input-box ', () => {
subject = buildSubject()
let closingTime = subject.find('form')
expect(closingTime).toEqual('14:00')
})
//This doesnt work
it('Renders the "tilføj" button', () => {
subject = buildSubject()
let button = subject.find('.addItemRow')
expect(button.text()).toEqual('Tilføj')
})
})
My component
class MenuInputFields extends React.Component {
constructor(props){
super(props)
}
render() {
let currentDate = new Date()
let formattedDate = currentDate.toLocaleDateString('en-GB')
const renderField = ({ input, label, type, className, meta: { touched, error } }) => (
<div>
<input {...input} type={type} placeholder={label} className={className} />
{touched && error && <span>{error}</span>}
</div>
);
const renderMenuItem = ({fields, meta: {touched, error, submitFailed }}) => (
<ul className='adminInputFoodItem'>
{fields.map((MenuItem, index) => (
<li key={index}>
<p className='col-md-1'> {index+1} - </p>
<Field
name={`${MenuItem}.FoodItem`}
type='text'
component={renderField}
label='Titel'
className='col-md-2'
/>
<Field
name={`${MenuItem}.Description`}
type='text'
component={renderField}
label='Beskrivelse'
className='col-md-6'
/>
<Field
name={`${MenuItem}.Price`}
type='number'
component={renderField}
label='Pris'
className='col-md-1'
/>
<button
type='button'
title='Fjern'
onClick={() => fields.remove(index)}
className='btn btn-default btn-xs remItemRow'
>Fjern
</button>
</li>
))}
<li>
</li>
<li>
<button
type='button'
onClick={() => fields.push({})}
className='btn btn-default btn-sm addItemRow'
>Tilføj
</button>
{submitFailed && error && <span>{error}</span>}
</li>
</ul>
);
const { handleSubmit, pristine, reset, submitting, submitForm } = this.props
return (
<form className='adminInputForm' onSubmit={handleSubmit(submitForm)}>
<label className='col-md-2' >Dato: {formattedDate}</label>
<br />
<br />
<ul className='adminInputFoodItem'>
<li>
<label className='col-md-1'> Lukketid: </label>
<Field
name='ClosingTime'
type='text'
component={renderField}
label='TT:mm'
className='col-md-1'
/>
</li>
</ul>
<hr />
<div>
<label className='col-md-1'> # </label>
<label className='col-md-2'> Titel </label>
<label className='col-md-3'> Beskrivelse </label>
<label className='col-md-1'> Pris </label>
</div>
<br />
<br />
<FieldArray name='MenuItems' component={renderMenuItem} />
<br />
<div className=''>
<button
className='btn btn-default'
type='submit'
disabled={pristine || submitting}
>Gem Menu
</button>
<label>Submit besked her</label>
</div>
</form>
)
}
}
MenuInputFields = reduxForm({
form: 'inputItemList',
validate
})(MenuInputFields)
export default MenuInputFields
The container which renders the component:
const mapDispatchToProps = (dispatch) => {
return {
setMenu: (menu) => dispatch(setMenu(menu)),
submitForm: (newMenu) => dispatch(postMenuRequest(newMenu))
}
}
class AdminSetMenuView extends React.Component {
constructor(props){
super(props)
}
componentWillMount(){
this.props.setMenu(this.props.data)
}
render(){
return(
<div>
<AdminRoutes />
<br />
<br />
<div>
<MenuInputFields
initialValues={this.props.initialValues}
submitForm={this.props.submitForm} />
</div>
</div>
)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(AdminSetMenuView)
output from console.log(subject.debug()):
<form className="adminInputForm" onSubmit={[Function: proxy]}>
<label className="col-md-2">
Dato:
3/8/2018
</label>
<br />
<br />
<ul className="adminInputFoodItem">
<li>
<label className="col-md-1">
Lukketid:
</label>
<Field name="ClosingTime" type="text" component={[Function: renderField]} label="TT:mm" className="col-md-1" />
</li>
</ul>
<hr />
<div>
<label className="col-md-1">
#
</label>
<label className="col-md-2">
Titel
</label>
<label className="col-md-3">
Beskrivelse
</label>
<label className="col-md-1">
Pris
</label>
</div>
<br />
<br />
<FieldArray name="MenuItems" component={[Function: renderMenuItem]} />
<br />
<div className="">
<button className="btn btn-default" type="submit" disabled={[undefined]}>
Gem Menu
</button>
<label>
Submit besked her
</label>
</div>