I am very new to the enzyme/shallow render testing. I probably don't fully understand it yet.
Using this simplified component:
export const PlacementOption = (props) => <div/>
const UpdatingSelectField = (props) => <div/>
export class DevicePlatforms extends Component{
render(){
return <div>
<UpdatingSelectField/>
{this.props.value.device_platforms && this.props.children}
</div>
}
}
I am trying to tests DevicePlatforms. If this.props.value.device_platforms is not present children are not rendered and if it is they are rendered.
import React from 'react';
import { shallow, mount, render } from 'enzyme';
import { DevicePlatforms } from './Placement.js';
import { PlacementOption } from './Placement.js'
describe("<DevicePlatforms/>", function() {
it("with all devices selected renders all children", function() {
const value = {
device_platforms: "mobile/desktop",
}
const Component = <DevicePlatforms
value={value}
>
<PlacementOption/>
<PlacementOption/>
</DevicePlatforms>
const wrapper = shallow(Component)
expect(wrapper.find('PlacementOption')).toBe(2)
})
it("with no devices selected renders no children", function() {
const value = {}
const Component = <DevicePlatforms
value={value}
>
<PlacementOption/>
<PlacementOption/>
</DevicePlatforms>
const wrapper = shallow(Component)
expect(wrapper.find('PlacementOption')).toBe(0)
})
})
I have tried 'PlacementOption', PlacementOption in a find call.
All I get is a:
Expected ShallowWrapper({ many many lines of shallow wrapper content }) to be 3
Expected ShallowWrapper({ many many lines of shallow wrapper content }) to be 0
errors.
I can paste the "many many lines of shallow wrapper content" if needed but i don't think it is related and my problem is somewhere else - probably around somewhere around me not knowing how to use shallow render stuff.
