Kocur4d Kocur4d - 1 month ago 11
React JSX Question

Shallow rendering using enzyme simple test not working

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.

Answer

You're asserting that an enzyme ShallowWrapper is equal to 3 or 0. This doesn't make sense.

Instead, the ShallowWrapper that is returned from .find() has a .length property. Try using that instead.

expect(wrapper.find('PlacementOption').length).toBe(2)