Как проверить CSS парение в ферменте - React - PullRequest
Новая
       7

Как проверить CSS парение в ферменте - React

2 голосов
/ 23 марта 2020

Я новичок в тестировании React с помощью Enzyme и Jest, и у меня есть сценарий для тестирования:

При наведении курсора на ParentDiv элемент div должен изменить стиль на background-color: green и display: block. Но при тестировании после имитации события mouseenter стиль не меняется, они по-прежнему background-color: red и display: none

Это компонент на основе классов 

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');
    });
...