Jest.js 与本地相比,服务器(CI)中的材料UI模式快照不同

axr492tv  于 2023-01-06  发布在  Jest
关注(0)|答案(1)|浏览(123)

我有一个jest/react测试库快照,它在服务器上失败了,但是本地快照没有得到更新(即使我使用--ci选项运行)。
我说的是一个来自material ui的模态组件。

import {Modal} from '@mui/material';
(...)

<Modal
      open={isOpen}
      onClose={toggleModal}
      disableEscapeKeyDown
      hideBackdrop={false}> // also attempted to remove this prop, since default is false but makes no diference
      (...)
</Modal>

快照测试:

it('should match snapshot', () => {
    renderComponent();
    expect(wrapper.baseElement).toMatchSnapshot();
  });

运行测试的Package.json脚本:

(...)
"test": "jest",
"test:ci": "jest --ci",

本地快照如下所示,并且永远不会更新(尝试使用-- -u选项):

(...)
class="MuiBackdrop-root css-i9fmh8-MuiBackdrop-root-MuiModal-backdrop"

但是在服务器上,快照被更新为以下内容(它使用“npm run test:ci”执行):

(...)
-       class="MuiBackdrop-root css-i9fmh8-MuiBackdrop-root-MuiModal-backdrop"
+       class="MuiBackdrop-root MuiModal-backdrop css-i9fmh8-MuiBackdrop-root-MuiModal-backdrop"

正如您所看到的,MuiModal-background被引入到类名的中间,并且我没有使用控件悬停此div,因为它是隐藏的,并且是由材质ui本身生成的,我可以在本地快照中确认:

<div
      aria-hidden="true"
      class="MuiBackdrop-root css-i9fmh8-MuiBackdrop-root-MuiModal-backdrop"
      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
    />

我使用的节点版本与CI环境中的相同,即v16.18.1。您知道这可能是什么吗?

mnowg1ta

mnowg1ta1#

解决方案是将材质ui更新为最新版本,在本例中:“@mui/材料”:“^5.11.2”,

相关问题