I am encountering an issue with a Jest/React testing library snapshot that fails on the server, but locally the snapshot does not update even when using the --ci option.
The problem specifically involves a modal component from 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 difference
(...)
</Modal>
Snapshot Test:
it('should match snapshot', () => {
renderComponent();
expect(wrapper.baseElement).toMatchSnapshot();
});
Here are the scripts in package.json used to run the tests:
(...)
"test": "jest",
"test:ci": "jest --ci",
Locally, the snapshot remains unchanged despite attempts to update it using the -u option:
(...)
class="MuiBackdrop-root css-i9fmh8-MuiBackdrop-root-MuiModal-backdrop"
However, on the server, the snapshot does get updated as expected when running "npm run test:ci":
(...)
- class="MuiBackdrop-root css-i9fmh8-MuiBackdrop-root-MuiModal-backdrop"
+ class="MuiBackdrop-root MuiModal-backdrop css-i9fmh8-MuiBackdrop-root-MuiModal-backdrop"
The discrepancy lies in the introduction of 'MuiModal-backdrop' in the middle of the class name, which I cannot control since it is a hidden element generated by Material UI itself, as seen in the local snapshot:
<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;"
/>
I am using the same node version (v16.18.1) in both my local environment and CI setup. Any insights on what might be causing this issue?