React Jest/Enzyme - 快照创建的文件太大（数千行）/从快照中删除属性答案

【问题标题】：React Jest/Enzyme - Snapshots created files are too big (thousands of lines) / Remove attributes from snapshotReact Jest/Enzyme - 快照创建的文件太大（数千行）/从快照中删除属性
【发布时间】：2021-05-29 00:53:13
【问题描述】：

每次我为特定组件创建快照时，它都会为它返回数千行（例如 80k）因为它为很多选择器显示了一个名为“主题”的属性。我怎样才能摆脱这个属性。我认为我没有必要测试这些东西。

项目信息：

反应 cra
组件垫圈
用于测试的 JEST/ENZYME

【问题讨论】：

标签： reactjs testing jestjs enzyme snapshot

【解决方案1】：

我需要查看您的组件代码才能向您发送确切的解决方案，但我很确定您的情况下的 theme 是作为组件扩展运算符符号的一部分发送的（例如 {...rest}）和最终被转发到 DOM，或者类似的东西。

为避免这种行为，请尝试从扩展符号中解构 theme 并查看它是否仍会到达 DOM。

例如，

// assuming props include `theme` prop
export const App = ({...props}) =>{
    const [theme, ...rest] = props;
    return <Box {...rest} /> // Box should no longer include theme and it won't appear on the DOM (i.e. the tests snapshots)
}

如果您没有从一开始就使用theme 组件（可能是这种情况，因为它从未被解构），最好不要从一开始就将其发送到组件并避免解构它的开销。

祝你好运！

【讨论】：