Реактивное тестирование свойства toHaveStyleRule, не найденного в правилах стиля

Question

Я пытаюсь проверить, что ThemeProvider предоставляет тему для моего компонента. Он правильно предоставляет стандартную и настраиваемую тему для базового класса и проходит тесты, но когда я проверяю класс условий, он не находит ни одного из стилей. Это даже во время прохождения класса напрямую. Это мое первое занятие по Styled-Components и тестированию в целом.

Я протестировал использование необязательного импорта {css} из стилевых компонентов, попытался передать класс напрямую и полностью удалить класс по умолчанию. Я также попытался установить стиль по умолчанию непосредственно в компоненте styled. ToBeTruthy () действительно проходит, так что он, по крайней мере, видит его с классом, я бы подумал?

// This is being called globally

export const mountWithTheme = (Component, customTheme) => {
  const theme = customTheme || defaultTheme
  return mount(<ThemeProvider theme={theme}>{Component}</ThemeProvider>)
}

import React from 'react';
import { shallow, mount } from 'enzyme';
import { MemoryRouter, Route, Link } from 'react-router-dom';
import { css } from 'styled-components';
import 'jest-styled-components';

import HeaderLinkA from './HeaderLinkA.jsx';

describe('HeaderLinkA', () => {
    it('renders color /w prop', () => {
        const wrapper = mount(
            <MemoryRouter initialEntries={['/about']} >
                <Route component={props => <HeaderLinkA {...props} name='about' test='about' theme={{ primarycolor: 'white', secondarycolor: 'black' }} /> } path='/about' /> 
            </MemoryRouter>
        )
        expect(wrapper.find('Link')).toHaveStyleRule('color', 'white');
        expect(wrapper.find('Link')).toHaveStyleRule('color', 'white', {
            modifier: `:hover`,
        });
    });

    it('is themed with default styles, when theme is missing', () => {
        const wrapper = global.StyledComponents.mountWithTheme(
            <MemoryRouter initialEntries={['/about']} >
                <React.Fragment>      
                    <HeaderLinkA name='about' testclass='section-link-active' />,
                </React.Fragment>
            </MemoryRouter>
        )
        expect(wrapper.find('Link')).toHaveStyleRule('color', '#FFF')
        expect(wrapper.find('Link')).toHaveStyleRule('color', '#FFF', {
            modifier: `:hover`
        });
        expect(wrapper.find('Link.section-link-active')).toBeTruthy();
        expect(wrapper.find('Link')).toHaveStyleRule('border-bottom', '1px solid #95d5d2');
    });
});

import React from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';

const StyledHeaderLink = styled(Link)`
    text-decoration: none;
    color: ${ props => props.theme.primarycolor };
    padding-bottom: 2px;
    overflow-x: hidden;
    position: relative;
    display: inline-flex;

    &:active,
    &:hover {
        color: ${ props => props.theme.primarycolor };
    }

    &.section-link {
        &:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            height: 1px;
            background: ${ props => props.theme.secondarycolor };
            width: 100%;
            transform: translate3d(-110%, 0, 0);
            -webkit-transform: translate3d(-110%, 0, 0);
            transition: transform .3s ease-in-out;
            -webkit-transition: transform .3s ease-in-out;
        }

        &:hover:after {
            transform: translate3d(0%, 0, 0);
            -webkit-transform: translate3d(0%, 0, 0);
        }
    }

    &.section-link-active {
        border-bottom: 1px solid ${ props => props.theme.secondarycolor || '#95d5d2' };
    }

`;

const HeaderLinkA = ( props ) => {
    const page = props.name.toLowerCase();
    return (
        <StyledHeaderLink {...props } to={`/${ page }`}
            className={props.testclass || window.location.pathname === `/${ page }` ? // refactor this to be controlled by HeaderO and pass down the prop.
            'section-link-active'
            : 'section-link'} >
        {props.name}
        </StyledHeaderLink>
    )
}

export default HeaderLinkA;

Все тесты проходят до последнего, на котором я застрял.

«Свойство border-bottom» не найдено в правилах стиля »

Ожидаемое: "Граница-низ: 1px solid # 95d5d2" Получено: "border-bottom: undefined"