reactjs - 快照和调试输出之间的反应测试库差异
问题描述
我有一个非常奇怪的行为，什么可以解释调试功能的输出与快照不同的事实
debug()
expect(container).toMatchSnapshot()
整个测试功能：
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()
})
该组件执行异步调用，这就是我使用 waitFor 的原因。调试输出包含获取所有项目的列表，但不包含快照。
谢谢 ：）
调试功能输出：
<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>
快照输出：
// 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>
`;
解决方案
我给你答案！调试功能仅显示文档，而容器仅显示组件！
所以这是有效的：
expect(document.body).toMatchSnapshot()
推荐阅读
- python - python 3 请求。不可读的响应正文
- r - 带有 beta 家族的 glmmTMB
- c# - 如何在 C# 中使用 oledb 命令插入新行
- r - 在R中将重复测量旋转为宽格式
- java - Windows 批处理“dir”命令更改？
- reactjs - 如何同时将道具传递给两个组件？
- python - AttributeError：类型对象'Split'没有属性'Train'
- javascript - 有没有办法使用同位素过滤器插件使图像居中？
- windows - 如何将新代码推送到 github 中的现有 git 存储库
- java - How precise is websphere's session expiration?