How to force hover to test styles on hover of material-ui (v5 +) components? for example on Button
Notes:
- This componenent works as expected.
- I'm sure that it's not a duplicate.
- In Debug, the
background-color
value keep equals to my initial value (variabledefaultBackgroundColor
) - After this I want test it using my theme created with
createTheme
.
import React from 'react';
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
import { Button } from '@mui/material';
import userEvent from '@testing-library/user-event';
describe('Testing hover on Button from @mui ', () => {
it('Hover', async () => {
const defaultBackgroundColor: string = '#b3c';
const hoverBackgroundColor: string = '#ccc !important';
render(
<Button
data-testid="button"
style={{ backgroundColor: defaultBackgroundColor }}
sx={{
'&:hover ': {
backgroundColor: hoverBackgroundColor
}
}}
>
MyButtonWithHover
</Button>
);
const buttonEl: HTMLButtonElement = screen.getByTestId('button');
/* This initial expect it's ok */
expect(buttonEl).toHaveStyle(`
background-color: ${defaultBackgroundColor};
`);
// Now I need apply hover on buttonEl before that the below expect: the background-color is esquals to hoverBackgroundColor
expect(buttonEl).toHaveStyle(`
background-color: ${hoverBackgroundColor};
`);
});
});
My attempts:
const mouseEnter = fireEvent.mouseEnter(buttondEl);
const mouseOver = fireEvent.mouseOver(buttondEl);
const mouseUp = fireEvent.mouseUp(buttonEl);
const buttonEl = await waitFor(async () => {
await userEvent.hover(buttonEl, { delay: 0 });
return screen.getByTestId('button');
});
My setup: SharebookBR/sharebook-frontend-next