1

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 (variable defaultBackgroundColor)
  • 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

Henrique Holtz
  • 326
  • 2
  • 6

0 Answers0