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())
})
react-native jestjs enzyme
edited Nov 12 '18 at 18:44
skyboyer
3,33611128
asked Jun 20 '18 at 23:12
NicholasByDesign
382417
add a comment |
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())
})
react-native jestjs enzyme
edited Nov 12 '18 at 18:44
skyboyer
3,33611128
asked Jun 20 '18 at 23:12
NicholasByDesign
382417
add a comment |
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())
})
react-native jestjs enzyme
edited Nov 12 '18 at 18:44
skyboyer
3,33611128
asked Jun 20 '18 at 23:12
NicholasByDesign
382417
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())
})
react-native jestjs enzyme
react-native jestjs enzyme
edited Nov 12 '18 at 18:44
skyboyer
3,33611128
asked Jun 20 '18 at 23:12
NicholasByDesign
382417
edited Nov 12 '18 at 18:44
skyboyer
3,33611128
asked Jun 20 '18 at 23:12
NicholasByDesign
382417
edited Nov 12 '18 at 18:44
skyboyer
3,33611128
edited Nov 12 '18 at 18:44
skyboyer
3,33611128
edited Nov 12 '18 at 18:44
skyboyer
3,33611128
3,33611128
asked Jun 20 '18 at 23:12
NicholasByDesign
382417
asked Jun 20 '18 at 23:12
NicholasByDesign
382417
asked Jun 20 '18 at 23:12
NicholasByDesign
382417
382417
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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/
answered Jun 23 '18 at 21:31
Carlos Alberto de Araujo Barre
1
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f50958285%2freact-native-enzyme-jest-props-onpress-is-not-a-function%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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/
answered Jun 23 '18 at 21:31
Carlos Alberto de Araujo Barre
1
add a comment |
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/
answered Jun 23 '18 at 21:31
Carlos Alberto de Araujo Barre
1
add a comment |
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/
answered Jun 23 '18 at 21:31
Carlos Alberto de Araujo Barre
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/
answered Jun 23 '18 at 21:31
Carlos Alberto de Araujo Barre
1
answered Jun 23 '18 at 21:31
Carlos Alberto de Araujo Barre
1
answered Jun 23 '18 at 21:31
Carlos Alberto de Araujo Barre
1
answered Jun 23 '18 at 21:31
Carlos Alberto de Araujo Barre
1
1
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f50958285%2freact-native-enzyme-jest-props-onpress-is-not-a-function%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
