I'm currently using Jest and Enzyme to test the react-native component, everything work like expected expect some major file like
1. Testing setState on function in class Component and have state inside
Example i have a function inside a class called DummyClass.js then it have a function called dummyFunction() like
dummyFunction(){
let aState = this.state.aState
setState({name:"new name"}
}
And i will test the DummyClass by
deccribe(){
test('test function dummy',()=>{
const wrapper = shallow(<DummyClass {...props}/>)
const instance = wrapper.instance()
expect(instance.dummyFunction()).toBeUndefined()
})
}
It will success but it it show that i'm not cover the setState function inside that It will show like this
dummyFunction(){ //covered
let aState = this.state.aState // not covered
setState({name:"new name"} //not covered
}
2. Testing function or anything happen inside on function in class Component
Another case that i still don't know how to cover, that we have function inside a function, like above but instead of setState it return a function
dummyFunction(){
const aNewArray = []
const filterArr = filterArr.filter(item=> item.complete===true)
anotherDummyFunction(filterArr)
}
and I test exactly the same
deccribe(){
test('test function dummy',()=>{
const wrapper = shallow(<DummyClass {...props}/>)
const instance = wrapper.instance()
expect(instance.dummyFunction()).toBeUndefined()
})
}
And it show like above , said function and anything inside that is not cover
dummyFunction(){ //covered
const aNewArray = [] //not covered
const filterArr = filterArr.filter(item=> item.complete===true) //not covered
anotherDummyFunction(filterArr) //not covered
}
3. Testing condition that will return another component
Now if we have condition , like this
dummyFunction(){
if(this.props.condition1 && this.state.condition1){
return (<Child1 propsChild = {this.state.someState}/>)
}else{
return (<Child2 propsChild= {this.state.someState}/>)
}
}
I test it like this, by change the state and change props
deccribe(){
test('test function dummy',()=>{
const props = {
condition1:true // write both true and false to test
}
const wrapper = shallow(<DummyClass {...props}/>)
const instance = wrapper.instance()
instance.setState({someState:true})
expect(instance.dummyFunction()).toBeUndefined()
})
}
it will cover both case but will not cover the child component
dummyFunction(){
if(this.props.condition1 && this.state.condition1){
return (<Child1 propsChild = {this.state.someState}/>) // not covered
}else{
return (<Child2 propsChild= {this.state.someState}/>) //not covered
}
}
4.Testing a function that return child component
I have an example like this
function dummyComponent(){
const props1 = this.state.state1
const props2 = this.state.state2
return (
<Child props1={props1} props2={props2}/>
)
}
I test the same
deccribe(){
test('test function dummy',()=>{
const wrapper = shallow(<DummyClass {...props}/>)
const instance = wrapper.instance()
expect(instance.dummyFunction()).toBeUndefined()
})
}
And it also will not cover the rest of function instead of the first line
function dummyComponent(){ //covered
const props1 = this.state.state1 //not covered
const props2 = this.state.state2 //not covered
return ( //not covered
<Child props1={props1} props2={props2}/> //not covered
)
}
So, how can i cover all the above case with jest and enzyme? Thank a lots