Reactjs 为什么不能使用css样式进行测试？（使用测试反应库）

为什么不能在测试reacgt库中测试“css样式”

我要测试的代码在这里

<div onClick=onToggle data-testid='click-event' >
  <HeadText 
    data-testid="color-test"
    size="22px"
    active={boolean}
  >
    the party &nbsp;
    <Br />
    <div>When the party starts</div>
  </HeadText>
<div>

const HeadText = styled.div`
  letter-spacing: -0.88px;
  size: 22px;
  color: ${(props) => (props.active ? "green" : "red")};    *** toggle on -> color : green
  height: 1.43;
  mobile-size: 14px;

聚会


聚会什么时候开始
const HeadText=styled.div`
字母间距：-0.88px；
尺寸：22px；
颜色：${（props）=>（props.active？“绿色”：“红色”）}；***打开->颜色：绿色
身高：1.43；
手机尺寸：14px；

上层代码中有切换功能。当我点击文本的“聚会”时，它会变成颜色（如红色->绿色）。 当点击文本“TheParty”时，它被很好地呈现出来，并且实际上变成了绿色

我的测试代码失败了

请告诉我在代码下面我应该做什么

describe("Guide rendered", () => {
  test("Have been changed of color?", () => {
    const { getByTestId } = render(<Guide />);
    
    const titleOfGuide = getByTestId("click-event")
    const colorOftitle = getByTestId("color-test")

    fireEvent.click(titleOfGuide)
    
    expect(colorOftitle).toHaveStyle("active:true") // ("color: green")...etc. all failed

  })

}

description（“呈现的指南”），（）=>{
测试（“颜色是否已改变？”，（）=>{
const{getByTestId}=render（）；
const titleOfGuide=getByTestId（“单击事件”）
const colorOftitle=getByTestId（“颜色测试”）
fireEvent.click（指南标题）
expect（colorOftitle）.toHaveStyle（“active:true”）/（“color:green”）…等。全部失败
})
}