How to test CSS hover in Enzyme - React

Question

I am new To React testing with Enzyme and Jest, and I have this scenario to test:

When hover the ParentDiv, The Child div should change style to background-color: green and display: block. But in testing, after simulate mouseenter event, none of the style is changed, they still background-color: red and display: none

This is a Class-based component

const Child = styled.div`
    background-color: red;
    display: none;
`;

const ParentDiv = styled.div`
    &:hover {
        ${Child} {
            background-color: green;
            display: block;
        }
    }
`;

<ParentDiv>
  <Child>
    <p>{text}</p>
  </Child>
</ParentDiv>

Test.js

it('Hover over ParentDiv should display the child', () => {
        const Wrapper = mount(<MyComponent >);
        const parent = Wrapper.find('ParentDiv');
        const child = Wrapper.find('child');

        expect(child).toHaveStyleRule('display', 'none');
        expect(child).toHaveStyleRule('background-color', 'red');
        parent.simulate('mouseenter');
        // next two lines not working
        // expect(child).toHaveStyleRule('display', 'block');  // expected display: block but received display: none
        // expect(child).toHaveStyleRule('background-color', 'green');
    });

Are you using mount or shallow to render the component? Is it class based or functional? — Muhammad Haseeb

Nick Titchmarsh Nick Titchmarsh · Accepted Answer · 2020-12-08T09:10:17

In case anyone comes looking, the solution for this is to use the opts parameter in toHaveStyleRule.

so you need to use this:

expect(child).toHaveStyleRule('display', 'block', { modifier: ':hover' });

Here is a link to the docs: https://github.com/styled-components/jest-styled-components#tohavestylerule

How to test CSS hover in Enzyme - React

1 Answers