NicholasByDesign
NicholasByDesign

Reputation: 801

React Native Enzyme Jest props.onPress is not a function

While trying to write a test, if I call a parent function from a child it returns

props.onPress() is not a function

I am assuming I need to manually pass the props in for the on press in the test. But I feel like that might defeat the purpose of testing what is existing in the code structure.

Parent

export default class Parent extends React.Component {
   constructor(){
     super()
   }

   _method(){
     return "Something"
   }

   render(){
    return{
      <Child onPress={this._method.bind(this) }
    }
   }
}

Child

export default (Child = (props) => {
   const _childMethod = () => {
     return props.onPress()
   }

   return{
     <View>
         <TouchableOpacity onPress={() => { return _childMethod() }}>

        </TouchableOpacity>
    </View>
   }

})

Test

import "react-native"
import React from "react"
import Enzyme, {shallow, render} from "enzyme"
import Parent from "path/to/parent"
import Child from "path/to/child"

Enzyme.configure({adapter: new Adapter()})
const wrapper = shallow(<Child />)

it("Should return something", () => {
  console.log(wrapper.props().onPress())
})

Upvotes: 0

Views: 1534

Answers (1)

there are some mistakes in your code, first of all the return statements should use () instead of {}. If you use {} in the return statement of the render method of a component it will throw an error.

The props that you are testing it is a function of a child component TouchableOpacity, not a props of Child component.

To test it correctly you should user console.log(wrapper.props().children.props.onPress)

with this I got this response:

PASS  __tests__\dummy.test.js
  ● Console    
    console.log __tests__\dum

my.test.js:13
  [Function: onPress]

Hope that helped.

Brackets question useful link: http://jamesknelson.com/javascript-return-parenthesis/

Upvotes: 1

Related Questions