Piranhoid
Reputation: 31
React testing library difference between snapshot and debug output
I have a very strange behavior, what can explain the fact that the output of the debug function, differs from the snapshot
debug()
expect(container).toMatchSnapshot()
The entire test function :
test('renders component with default args', async () => {
const { container, debug, getByText } = render(<RolePopover />)
fireEvent.click(screen.getByRole('button'))
await waitFor(() => getByText('UI Designer'))
debug()
expect(container).toMatchSnapshot()
})
The component perform a async call that's why i'm using the waitFor. The debug output contain the list with all the items fetched, but the snapshot not.
Thanks :)
Debug function output :
<body
style="padding-right: 0px; overflow: hidden;"
>
<div
aria-hidden="true"
>
<div
style="padding: 20px;"
>
<div
class="sc-dlnjwi sc-hKFxyN pbobm jyUdcT"
>
<span
class="sc-gtsrHT eqhufs"
color="white"
/>
</div>
<button
class="sc-fujyAs cFENAY"
type="button"
>
<div
class="sc-dlnjwi dIOGKH"
display="flex"
visibility="visible"
>
<span>
Pick a role
</span>
</div>
</button>
<div
class="sc-bfmRie hyXwmM"
/>
</div>
</div>
<div
class="MuiPopover-root sc-biHcxt hepaYp"
role="presentation"
style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
>
<div
aria-hidden="true"
style="z-index: -1; position: fixed; right: 0px; bottom: 0px; top: 0px; left: 0px; background-color: transparent;"
/>
<div
data-test="sentinelStart"
tabindex="0"
/>
<div
class="MuiPaper-root MuiPopover-paper paper MuiPaper-elevation8 MuiPaper-rounded"
style="opacity: 1; transform: none; top: 16px; left: 16px;"
tabindex="-1"
>
<div
class="sc-dlnjwi bDyvvE"
overflow="hidden"
>
<div
class="sc-dlnjwi fSGxyX"
display="flex"
>
<span
class="sc-iJCRrE gAUaF"
>
Assign Role
</span>
</div>
<div
class="sc-dlnjwi jBCSWa"
>
<div
class="sc-dlnjwi lbGqZe"
display="flex"
>
<div
class="sc-dlnjwi gjCrlq"
display="flex"
>
<div
class="sc-dlnjwi jjvWPi"
display="flex"
>
<span
class="sc-iJCRrE sc-dsXzNU hFzdJF fCIiLb"
>
Search a role
</span>
<input
class="sc-bTDOke fUXsvY"
type="text"
value=""
/>
</div>
<fieldset
class="sc-eKYRIR TyfPs"
>
<legend
class="sc-hOPeYd hrYoc"
>
<span>
&
</span>
</legend>
</fieldset>
</div>
</div>
</div>
<div
class="sc-dlnjwi iEzfam"
display="flex"
>
<div
class="sc-dlnjwi cMaOQq"
cursor="pointer"
display="flex"
opacity="1"
>
<div
class="sc-dlnjwi clkcgn"
>
<span
class="sc-iJCRrE fPIdzb"
>
UI Designer
</span>
</div>
</div>
<div
class="sc-dlnjwi cMaOQq"
cursor="pointer"
display="flex"
opacity="1"
>
<div
class="sc-dlnjwi clkcgn"
>
<span
class="sc-iJCRrE fPIdzb"
>
Dev
</span>
</div>
</div>
<div
class="sc-dlnjwi cMaOQq"
cursor="pointer"
display="flex"
opacity="1"
>
<div
class="sc-dlnjwi clkcgn"
>
<span
class="sc-iJCRrE fPIdzb"
>
Marketing
</span>
</div>
</div>
<div
class="sc-dlnjwi cMaOQq"
cursor="pointer"
display="flex"
opacity="1"
>
<div
class="sc-dlnjwi clkcgn"
>
<span
class="sc-iJCRrE fPIdzb"
>
Communication
</span>
</div>
</div>
<div
class="sc-dlnjwi cMaOQq"
cursor="pointer"
display="flex"
opacity="1"
>
<div
class="sc-dlnjwi clkcgn"
>
<span
class="sc-iJCRrE fPIdzb"
>
R&D
</span>
</div>
</div>
<div
class="sc-dlnjwi cMaOQq"
cursor="pointer"
display="flex"
opacity="1"
>
<div
class="sc-dlnjwi clkcgn"
>
<span
class="sc-iJCRrE fPIdzb"
>
Support
</span>
</div>
</div>
<div
class="sc-dlnjwi cMaOQq"
cursor="pointer"
display="flex"
opacity="1"
>
<div
class="sc-dlnjwi clkcgn"
>
<span
class="sc-iJCRrE fPIdzb"
>
Role without members
</span>
</div>
</div>
</div>
</div>
</div>
<div
data-test="sentinelEnd"
tabindex="0"
/>
</div>
</body>
Snapshot ouput :
// Jest Snapshot v1
exports[`renders role popover with default args 1`] = `
.c2 {
display: inline-block;
max-width: 100%;
color: #ffffff;
line-height: 1.5;
font-size: 14rem;
font-weight: 400;
}
.c0 {
display: block;
padding: 10px 16px;
border-radius: 5px;
background-color: #40577C;
}
.c4 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
visibility: visible;
width: 100%;
height: 100%;
}
.c4 > * {
margin-right: 10rem !important;
}
.c4 > *:last-child {
margin-right: 0 !important;
}
.c1 {
opacity: 0.9;
word-break: break-word;
white-space: pre-wrap;
overflow: hidden;
max-width: 300px;
position: absolute;
z-index: 100000;
top: 0px;
left: 0px;
visibility: hidden;
}
.c1 * {
color: #ffffff !important;
}
.c3 {
border: none;
margin: 0;
padding: 0;
width: auto;
overflow: visible;
background-color: transparent;
color: inherit;
font: inherit;
text-align: left;
line-height: normal;
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;
-webkit-appearance: none;
cursor: pointer;
padding: 0 15rem;
position: relative;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
height: 36rem;
line-height: 1;
border-radius: 5px;
font-size: 14rem;
font-weight: 400;
white-space: nowrap;
width: auto;
cursor: pointer;
color: #ffffff;
background-color: #0787EF;
-webkit-transition: background-color 0.2s cubic-bezier(0.250,0.250,0.750,0.750);
transition: background-color 0.2s cubic-bezier(0.250,0.250,0.750,0.750);
}
.c3::-moz-focus-inner {
border: 0;
padding: 0;
}
.c3:focus {
outline: none;
}
.c3:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.c3 svg {
stroke: #ffffff;
}
.c3:hover {
background-color: #0787EF50;
}
.c3:disabled:hover {
background-color: #0787EF;
}
.c5 {
position: fixed;
bottom: 24px;
z-index: 2000;
right: 24px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: flex-end;
-webkit-box-align: flex-end;
-ms-flex-align: flex-end;
align-items: flex-end;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.c5 > * {
margin-bottom: 12px;
}
.c5 > *:last-child {
margin-bottom: 0px;
}
@media print {
}
<div
aria-hidden="true"
>
<div
style="padding: 20px;"
>
<div
class="c0 c1"
>
<span
class="c2"
color="white"
/>
</div>
<button
class="c3"
type="button"
>
<div
class="c4"
display="flex"
visibility="visible"
>
<span>
Pick a role
</span>
</div>
</button>
<div
class="c5"
/>
</div>
</div>
`;
Upvotes: 2
Views: 1472
Answers (1)
Piranhoid
Reputation: 31
I'v the answer ! The debug function display only the document, and the container it's only the component !
So this is working :
expect(document.body).toMatchSnapshot()
Upvotes: 1
Related Questions
- react-testing-library: some portion of debug's output is not visible
- React Testing Library merged with @testing-library/react-hooks, wrapper inconsistent in renderHook
- React-testing-library: changes due to input
- React testing lib not update the state
- React snapshot testing - react-test-renderer vs. react-testing-library
- Mock state in react snapshot test?
- tests failing in react testing library
- Dynamic Snapshot Testing
- React testing using snapshots
- react-testing-library not rendering correct snapshots