How should we use snapshot test for complex React component
How should we use snapshot test for complex React component?
For example,
I have a detail view page, which contains a lot of small component.
As recommended by Jest, we may be better to use rule 'no-large-snapshot'.
If we write all snapshot tests for each small components, we could keep 'no-large-snapshot'.
However, I want to ensure one thing that when someone modifies a small component, my main detail page will not be changed. (There's several detail page. Maybe page A B are changed but I want to ensure C is not.)
Therefore, I need to snapshot 'detail' page, which will be a large snapshot test file, because it will render all of its children.
reactjs unit-testing jestjs snapshot
edited Nov 28 '18 at 13:07
LazerBass
1,47031124
asked Nov 28 '18 at 9:30
YH LYH L
12
add a comment |
How should we use snapshot test for complex React component?
For example,
I have a detail view page, which contains a lot of small component.
As recommended by Jest, we may be better to use rule 'no-large-snapshot'.
If we write all snapshot tests for each small components, we could keep 'no-large-snapshot'.
However, I want to ensure one thing that when someone modifies a small component, my main detail page will not be changed. (There's several detail page. Maybe page A B are changed but I want to ensure C is not.)
Therefore, I need to snapshot 'detail' page, which will be a large snapshot test file, because it will render all of its children.
reactjs unit-testing jestjs snapshot
edited Nov 28 '18 at 13:07
LazerBass
1,47031124
asked Nov 28 '18 at 9:30
YH LYH L
12
add a comment |
How should we use snapshot test for complex React component?
For example,
I have a detail view page, which contains a lot of small component.
As recommended by Jest, we may be better to use rule 'no-large-snapshot'.
If we write all snapshot tests for each small components, we could keep 'no-large-snapshot'.
However, I want to ensure one thing that when someone modifies a small component, my main detail page will not be changed. (There's several detail page. Maybe page A B are changed but I want to ensure C is not.)
Therefore, I need to snapshot 'detail' page, which will be a large snapshot test file, because it will render all of its children.
reactjs unit-testing jestjs snapshot
edited Nov 28 '18 at 13:07
LazerBass
1,47031124
asked Nov 28 '18 at 9:30
YH LYH L
12
How should we use snapshot test for complex React component?
For example,
I have a detail view page, which contains a lot of small component.
As recommended by Jest, we may be better to use rule 'no-large-snapshot'.
If we write all snapshot tests for each small components, we could keep 'no-large-snapshot'.
However, I want to ensure one thing that when someone modifies a small component, my main detail page will not be changed. (There's several detail page. Maybe page A B are changed but I want to ensure C is not.)
Therefore, I need to snapshot 'detail' page, which will be a large snapshot test file, because it will render all of its children.
reactjs unit-testing jestjs snapshot
reactjs unit-testing jestjs snapshot
edited Nov 28 '18 at 13:07
LazerBass
1,47031124
asked Nov 28 '18 at 9:30
YH LYH L
12
edited Nov 28 '18 at 13:07
LazerBass
1,47031124
asked Nov 28 '18 at 9:30
YH LYH L
12
edited Nov 28 '18 at 13:07
LazerBass
1,47031124
edited Nov 28 '18 at 13:07
LazerBass
1,47031124
edited Nov 28 '18 at 13:07
LazerBass
1,47031124
1,47031124
asked Nov 28 '18 at 9:30
YH LYH L
12
asked Nov 28 '18 at 9:30
YH LYH L
12
asked Nov 28 '18 at 9:30
YH LYH L
12
12
add a comment |
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
});
}
});
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%2f53516182%2fhow-should-we-use-snapshot-test-for-complex-react-component%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
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.
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%2f53516182%2fhow-should-we-use-snapshot-test-for-complex-react-component%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
