How to test react native correctly using jest and enzyme

Viewed 166

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

0 Answers
Related