Enzyme Mount Error - TypeError: Cannot read property 'find' of undefined
2
There is an error
TypeError: Cannot read property 'find' of undefined
when I tested my react component. I used jest and enzyme for react app testing.
I tried different methods but still got an undefined error.
test.js
import React from 'react';
import { mount } from 'enzyme';
import { StaticRouter } from 'react-router-dom';
import Button from '../index';
describe('<Button />', () => {
let renderComponent;
beforeEach(() => {
renderComponent = (props = {}) => {
mount(
// <MemoryRouter>
<Button href={href} {...props}>
{children}
</Button>,
// </MemoryRouter>,
);
};
});
it('should render an <a> tag if no handleRoute is provided', () => {
const renderedComponent = renderComponent();
expect(renderedComponent.find('a')).toHaveLength(1);
});
});
index.js (button component)
import React, { Children } from 'react';
import PropTypes from 'prop-types';
import A from './A';
// import StyledButton from './StyledButton';
import Wrapper from './Wrapper';
function Button(props) {
// render an anchor tag => a tag
let button = (
<A href={props.href} onClick={props.onClick}>
{Children.toArray(props.children)}
</A>
);
return <Wrapper>{button}</Wrapper>;
}
Button.propTypes = {
handleRoute: PropTypes.func,
href: PropTypes.string,
onClick: PropTypes.func,
children: PropTypes.node.isRequired,
};
export default Button;
reactjs jestjs enzyme
edited Nov 12 at 13:20
skyboyer
3,25611128
asked Nov 12 at 8:26
Walter Chau
133
add a comment |
2
There is an error
TypeError: Cannot read property 'find' of undefined
when I tested my react component. I used jest and enzyme for react app testing.
I tried different methods but still got an undefined error.
test.js
import React from 'react';
import { mount } from 'enzyme';
import { StaticRouter } from 'react-router-dom';
import Button from '../index';
describe('<Button />', () => {
let renderComponent;
beforeEach(() => {
renderComponent = (props = {}) => {
mount(
// <MemoryRouter>
<Button href={href} {...props}>
{children}
</Button>,
// </MemoryRouter>,
);
};
});
it('should render an <a> tag if no handleRoute is provided', () => {
const renderedComponent = renderComponent();
expect(renderedComponent.find('a')).toHaveLength(1);
});
});
index.js (button component)
import React, { Children } from 'react';
import PropTypes from 'prop-types';
import A from './A';
// import StyledButton from './StyledButton';
import Wrapper from './Wrapper';
function Button(props) {
// render an anchor tag => a tag
let button = (
<A href={props.href} onClick={props.onClick}>
{Children.toArray(props.children)}
</A>
);
return <Wrapper>{button}</Wrapper>;
}
Button.propTypes = {
handleRoute: PropTypes.func,
href: PropTypes.string,
onClick: PropTypes.func,
children: PropTypes.node.isRequired,
};
export default Button;
reactjs jestjs enzyme
edited Nov 12 at 13:20
skyboyer
3,25611128
asked Nov 12 at 8:26
Walter Chau
133
add a comment |
2
2
2
There is an error
TypeError: Cannot read property 'find' of undefined
when I tested my react component. I used jest and enzyme for react app testing.
I tried different methods but still got an undefined error.
test.js
import React from 'react';
import { mount } from 'enzyme';
import { StaticRouter } from 'react-router-dom';
import Button from '../index';
describe('<Button />', () => {
let renderComponent;
beforeEach(() => {
renderComponent = (props = {}) => {
mount(
// <MemoryRouter>
<Button href={href} {...props}>
{children}
</Button>,
// </MemoryRouter>,
);
};
});
it('should render an <a> tag if no handleRoute is provided', () => {
const renderedComponent = renderComponent();
expect(renderedComponent.find('a')).toHaveLength(1);
});
});
index.js (button component)
import React, { Children } from 'react';
import PropTypes from 'prop-types';
import A from './A';
// import StyledButton from './StyledButton';
import Wrapper from './Wrapper';
function Button(props) {
// render an anchor tag => a tag
let button = (
<A href={props.href} onClick={props.onClick}>
{Children.toArray(props.children)}
</A>
);
return <Wrapper>{button}</Wrapper>;
}
Button.propTypes = {
handleRoute: PropTypes.func,
href: PropTypes.string,
onClick: PropTypes.func,
children: PropTypes.node.isRequired,
};
export default Button;
reactjs jestjs enzyme
edited Nov 12 at 13:20
skyboyer
3,25611128
asked Nov 12 at 8:26
Walter Chau
133
There is an error
TypeError: Cannot read property 'find' of undefined
when I tested my react component. I used jest and enzyme for react app testing.
I tried different methods but still got an undefined error.
test.js
import React from 'react';
import { mount } from 'enzyme';
import { StaticRouter } from 'react-router-dom';
import Button from '../index';
describe('<Button />', () => {
let renderComponent;
beforeEach(() => {
renderComponent = (props = {}) => {
mount(
// <MemoryRouter>
<Button href={href} {...props}>
{children}
</Button>,
// </MemoryRouter>,
);
};
});
it('should render an <a> tag if no handleRoute is provided', () => {
const renderedComponent = renderComponent();
expect(renderedComponent.find('a')).toHaveLength(1);
});
});
index.js (button component)
import React, { Children } from 'react';
import PropTypes from 'prop-types';
import A from './A';
// import StyledButton from './StyledButton';
import Wrapper from './Wrapper';
function Button(props) {
// render an anchor tag => a tag
let button = (
<A href={props.href} onClick={props.onClick}>
{Children.toArray(props.children)}
</A>
);
return <Wrapper>{button}</Wrapper>;
}
Button.propTypes = {
handleRoute: PropTypes.func,
href: PropTypes.string,
onClick: PropTypes.func,
children: PropTypes.node.isRequired,
};
export default Button;
reactjs jestjs enzyme
reactjs jestjs enzyme
edited Nov 12 at 13:20
skyboyer
3,25611128
asked Nov 12 at 8:26
Walter Chau
133
edited Nov 12 at 13:20
skyboyer
3,25611128
asked Nov 12 at 8:26
Walter Chau
133
edited Nov 12 at 13:20
skyboyer
3,25611128
edited Nov 12 at 13:20
skyboyer
3,25611128
edited Nov 12 at 13:20
skyboyer
3,25611128
3,25611128
asked Nov 12 at 8:26
Walter Chau
133
asked Nov 12 at 8:26
Walter Chau
133
asked Nov 12 at 8:26
Walter Chau
133
133
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
3
You must return the component from your renderComponent function.
renderComponent = (props = {}) => {
return mount(
// <MemoryRouter>
<Button href={href} {...props}>
{children}
</Button>,
// </MemoryRouter>,
);
};
answered Nov 12 at 8:30
Tholle
33.6k53760
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
});
}
});
draft saved
draft discarded
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%2f53258271%2fenzyme-mount-error-typeerror-cannot-read-property-find-of-undefined%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
3
You must return the component from your renderComponent function.
renderComponent = (props = {}) => {
return mount(
// <MemoryRouter>
<Button href={href} {...props}>
{children}
</Button>,
// </MemoryRouter>,
);
};
answered Nov 12 at 8:30
Tholle
33.6k53760
add a comment |
3
You must return the component from your renderComponent function.
renderComponent = (props = {}) => {
return mount(
// <MemoryRouter>
<Button href={href} {...props}>
{children}
</Button>,
// </MemoryRouter>,
);
};
answered Nov 12 at 8:30
Tholle
33.6k53760
add a comment |
3
3
3
You must return the component from your renderComponent function.
renderComponent = (props = {}) => {
return mount(
// <MemoryRouter>
<Button href={href} {...props}>
{children}
</Button>,
// </MemoryRouter>,
);
};
answered Nov 12 at 8:30
Tholle
33.6k53760
You must return the component from your renderComponent function.
renderComponent = (props = {}) => {
return mount(
// <MemoryRouter>
<Button href={href} {...props}>
{children}
</Button>,
// </MemoryRouter>,
);
};
answered Nov 12 at 8:30
Tholle
33.6k53760
answered Nov 12 at 8:30
Tholle
33.6k53760
answered Nov 12 at 8:30
Tholle
33.6k53760
answered Nov 12 at 8:30
Tholle
33.6k53760
33.6k53760
add a comment |
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53258271%2fenzyme-mount-error-typeerror-cannot-read-property-find-of-undefined%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
