Reactjs 在样式规则中未找到Resact testing to HaveStyleRule属性

我试图测试ThemeProvider是否为我的组件提供了主题。它正确地为基类提供了默认和自定义主题并通过了测试，但是当我测试condition类时，它没有找到任何样式。甚至在直接通过类时也是如此。这是我第一次尝试将样式化组件和测试作为一个整体

我已经使用可选的{css}从样式化组件导入进行了测试，尝试直接传递类，并完全删除默认类。我还尝试直接在样式化组件中设置默认样式。toBeTruthy（）确实通过了，所以它至少在我认为的类中看到了它

// This is being called globally

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

//这是全局调用的
导出常量mountWithTheme=（组件，自定义主题）=>{
常量主题=自定义主题| |默认主题
返回装载（{Component}）
}

从“React”导入React；
从“酶”导入{shall，mount}；
从“react router dom”导入{MemoryRouter，Route，Link}；
从“样式化组件”导入{css}；
导入“jest样式的组件”；
从“./HeaderLinkA.jsx”导入HeaderLinkA；
描述（'HeaderLinkA'，（）=>{
它（'呈现颜色/w道具'，（）=>{
常量包装器=装入(
}路径='/about'/>
)
expect（wrapper.find（'Link'））.toHaveStyleRule（'color'，'white'）；
expect（wrapper.find（'Link'））.toHaveStyleRule（'color'，'white'）{
修饰符：`：悬停`，
});
});
它（'当缺少主题时，使用默认样式设置主题'，（）=>{
const wrapper=global.StyledComponents.mountWithTheme(
,
)
expect（wrapper.find（'Link'））.toHaveStyleRule（'color'，'#FFF'））
expect（wrapper.find（'Link'））.toHaveStyleRule（'color'，'#FFF'）{
修饰语：`：悬停`
});
expect（wrapper.find（'Link.section-Link-active'））.toBeTruthy（）；
expect（wrapper.find（'Link'））.toHaveStyleRule（'border-bottom'，'1px-solid#95d5d2'）；
});
});

从“React”导入React；
从'react router dom'导入{Link}；
从“样式化组件”导入样式化；
const StyledHeaderLink=已设置样式（链接）`
文字装饰：无；
颜色：${props=>props.theme.primarycolor}；
垫底：2件；
溢出x：隐藏；
位置：相对位置；
显示：内联flex；
&：激活，
&：悬停{
颜色：${props=>props.theme.primarycolor}；
}
&.节链接{
&：之后{
内容：''；
位置：绝对位置；
底部：0；
左：0；
高度：1px；
背景：${props=>props.theme.secondarycolor}；
宽度：100%；
转换：translate3d（-110%，0，0）；
-webkit转换：translate3d（-110%，0，0）；
转换：转换。3秒轻松输入输出；
-webkit转换：转换。3s易入易出；
}
&：悬停：之后{
变换：translate3d（0%，0，0）；
-webkit转换：translate3d（0%，0，0）；
}
}
&.节链接处于活动状态{
边框底部：1px solid${props=>props.theme.secondarycolor | |'#95d5d2'}；
}
`;
const HeaderLinkA=（道具）=>{
const page=props.name.toLowerCase（）；
返回(
{props.name}
)
}
导出默认HeaderLinkA；

所有的测试都通过了，直到最后一个我坚持的测试

“在样式规则中找不到属性“border bottom”

预期： “边框底部：1px实心#95d5d2” 收到： “边框底部：未定义”

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;