validateDOMNesting warning with a -based component using Enzyme.mount
0
I have a component with a <tr> as the base element and it renders fine. But when I try to test it using mount, I get a warning:
Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>.
Here's a reproduction:
import React, Component from 'react';
import mount from 'enzyme';
class Foo extends Component
render()
return (
<tr>
<td>moo</td>
</tr>
)
it('should not fail', () =>
const wrapper = mount(<Foo />);
console.log(wrapper.html());
);
In the call to mount, I can wrap the component with <table><tbody><Foo /></tbody></table> to make the warning go away. But it feels like there should be another way to do it since this warning doesn't happen with shallow or in the application itself.
This is with:
- React 16.5.2
- Enzyme 3.7.0
reactjs enzyme
asked Nov 14 '18 at 22:16
Kyle BaleyKyle Baley
2101314
add a comment |
0
I have a component with a <tr> as the base element and it renders fine. But when I try to test it using mount, I get a warning:
Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>.
Here's a reproduction:
import React, Component from 'react';
import mount from 'enzyme';
class Foo extends Component
render()
return (
<tr>
<td>moo</td>
</tr>
)
it('should not fail', () =>
const wrapper = mount(<Foo />);
console.log(wrapper.html());
);
In the call to mount, I can wrap the component with <table><tbody><Foo /></tbody></table> to make the warning go away. But it feels like there should be another way to do it since this warning doesn't happen with shallow or in the application itself.
This is with:
- React 16.5.2
- Enzyme 3.7.0
reactjs enzyme
asked Nov 14 '18 at 22:16
Kyle BaleyKyle Baley
2101314
Is there a specific reason why you are trying to usemount? Usingshallowis recommended whenever possible because it keeps the test focused on "testing a component as a unit". This keeps your unit tests from "indirectly asserting on behavior of child components" and makes testing much easier by avoiding issues like this where you would need to do additional work to set everything up for a full DOM rendering.
– brian-lives-outdoors
Nov 15 '18 at 3:48
@brian-lives-outdoors I don't recall the details. I think it was specifically to test some of the child component interactions. Either way, I'd still like to know if there is a way of using mount with a tr-based component.
– Kyle Baley
Nov 20 '18 at 16:44
It sounds like you are asking if there is a way to test a<tr>-based component by itself usingmount. The answer is no, whatever you pass tomountmust be ready for a full DOM rendering and a standalone<tr>is invalid. To usemountyou would need to wrap the<tr>-based component in a<table>just like how you describe in your question.
– brian-lives-outdoors
Nov 22 '18 at 4:41
add a comment |
0
0
0
I have a component with a <tr> as the base element and it renders fine. But when I try to test it using mount, I get a warning:
Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>.
Here's a reproduction:
import React, Component from 'react';
import mount from 'enzyme';
class Foo extends Component
render()
return (
<tr>
<td>moo</td>
</tr>
)
it('should not fail', () =>
const wrapper = mount(<Foo />);
console.log(wrapper.html());
);
In the call to mount, I can wrap the component with <table><tbody><Foo /></tbody></table> to make the warning go away. But it feels like there should be another way to do it since this warning doesn't happen with shallow or in the application itself.
This is with:
- React 16.5.2
- Enzyme 3.7.0
reactjs enzyme
asked Nov 14 '18 at 22:16
Kyle BaleyKyle Baley
2101314
I have a component with a <tr> as the base element and it renders fine. But when I try to test it using mount, I get a warning:
Warning: validateDOMNesting(...): <tr> cannot appear as a child of <div>.
Here's a reproduction:
import React, Component from 'react';
import mount from 'enzyme';
class Foo extends Component
render()
return (
<tr>
<td>moo</td>
</tr>
)
it('should not fail', () =>
const wrapper = mount(<Foo />);
console.log(wrapper.html());
);
In the call to mount, I can wrap the component with <table><tbody><Foo /></tbody></table> to make the warning go away. But it feels like there should be another way to do it since this warning doesn't happen with shallow or in the application itself.
This is with:
- React 16.5.2
- Enzyme 3.7.0
reactjs enzyme
reactjs enzyme
asked Nov 14 '18 at 22:16
Kyle BaleyKyle Baley
2101314
asked Nov 14 '18 at 22:16
Kyle BaleyKyle Baley
2101314
asked Nov 14 '18 at 22:16
Kyle BaleyKyle Baley
2101314
asked Nov 14 '18 at 22:16
Kyle BaleyKyle Baley
2101314
asked Nov 14 '18 at 22:16
Kyle BaleyKyle Baley
2101314
2101314
Is there a specific reason why you are trying to usemount? Usingshallowis recommended whenever possible because it keeps the test focused on "testing a component as a unit". This keeps your unit tests from "indirectly asserting on behavior of child components" and makes testing much easier by avoiding issues like this where you would need to do additional work to set everything up for a full DOM rendering.
– brian-lives-outdoors
Nov 15 '18 at 3:48
@brian-lives-outdoors I don't recall the details. I think it was specifically to test some of the child component interactions. Either way, I'd still like to know if there is a way of using mount with a tr-based component.
– Kyle Baley
Nov 20 '18 at 16:44
It sounds like you are asking if there is a way to test a<tr>-based component by itself usingmount. The answer is no, whatever you pass tomountmust be ready for a full DOM rendering and a standalone<tr>is invalid. To usemountyou would need to wrap the<tr>-based component in a<table>just like how you describe in your question.
– brian-lives-outdoors
Nov 22 '18 at 4:41
add a comment |
Is there a specific reason why you are trying to usemount? Usingshallowis recommended whenever possible because it keeps the test focused on "testing a component as a unit". This keeps your unit tests from "indirectly asserting on behavior of child components" and makes testing much easier by avoiding issues like this where you would need to do additional work to set everything up for a full DOM rendering.
– brian-lives-outdoors
Nov 15 '18 at 3:48
@brian-lives-outdoors I don't recall the details. I think it was specifically to test some of the child component interactions. Either way, I'd still like to know if there is a way of using mount with a tr-based component.
– Kyle Baley
Nov 20 '18 at 16:44
It sounds like you are asking if there is a way to test a<tr>-based component by itself usingmount. The answer is no, whatever you pass tomountmust be ready for a full DOM rendering and a standalone<tr>is invalid. To usemountyou would need to wrap the<tr>-based component in a<table>just like how you describe in your question.
– brian-lives-outdoors
Nov 22 '18 at 4:41
Is there a specific reason why you are trying to use
mount? Using shallow is recommended whenever possible because it keeps the test focused on "testing a component as a unit". This keeps your unit tests from "indirectly asserting on behavior of child components" and makes testing much easier by avoiding issues like this where you would need to do additional work to set everything up for a full DOM rendering.– brian-lives-outdoors
Nov 15 '18 at 3:48
Is there a specific reason why you are trying to use
mount? Using shallow is recommended whenever possible because it keeps the test focused on "testing a component as a unit". This keeps your unit tests from "indirectly asserting on behavior of child components" and makes testing much easier by avoiding issues like this where you would need to do additional work to set everything up for a full DOM rendering.– brian-lives-outdoors
Nov 15 '18 at 3:48
@brian-lives-outdoors I don't recall the details. I think it was specifically to test some of the child component interactions. Either way, I'd still like to know if there is a way of using mount with a tr-based component.
– Kyle Baley
Nov 20 '18 at 16:44
@brian-lives-outdoors I don't recall the details. I think it was specifically to test some of the child component interactions. Either way, I'd still like to know if there is a way of using mount with a tr-based component.
– Kyle Baley
Nov 20 '18 at 16:44
It sounds like you are asking if there is a way to test a
<tr>-based component by itself using mount. The answer is no, whatever you pass to mount must be ready for a full DOM rendering and a standalone <tr> is invalid. To use mount you would need to wrap the <tr>-based component in a <table> just like how you describe in your question.– brian-lives-outdoors
Nov 22 '18 at 4:41
It sounds like you are asking if there is a way to test a
<tr>-based component by itself using mount. The answer is no, whatever you pass to mount must be ready for a full DOM rendering and a standalone <tr> is invalid. To use mount you would need to wrap the <tr>-based component in a <table> just like how you describe in your question.– brian-lives-outdoors
Nov 22 '18 at 4:41
add a comment |
0
active
oldest
votes
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%2f53309566%2fvalidatedomnesting-warning-with-a-tr-based-component-using-enzyme-mount%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
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%2f53309566%2fvalidatedomnesting-warning-with-a-tr-based-component-using-enzyme-mount%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
Is there a specific reason why you are trying to use
mount? Usingshallowis recommended whenever possible because it keeps the test focused on "testing a component as a unit". This keeps your unit tests from "indirectly asserting on behavior of child components" and makes testing much easier by avoiding issues like this where you would need to do additional work to set everything up for a full DOM rendering.– brian-lives-outdoors
Nov 15 '18 at 3:48
@brian-lives-outdoors I don't recall the details. I think it was specifically to test some of the child component interactions. Either way, I'd still like to know if there is a way of using mount with a tr-based component.
– Kyle Baley
Nov 20 '18 at 16:44
It sounds like you are asking if there is a way to test a
<tr>-based component by itself usingmount. The answer is no, whatever you pass tomountmust be ready for a full DOM rendering and a standalone<tr>is invalid. To usemountyou would need to wrap the<tr>-based component in a<table>just like how you describe in your question.– brian-lives-outdoors
Nov 22 '18 at 4:41