测试被Styled-Components包裹的组件时出现TypeError错误求助

问题背景 #

我在为组件编写测试用例，测试代码如下：

render(<DetailsPage/>);
expect(screen.byTestId("details-wrapper-select")).toBeInDocument();

执行测试后出现以下两个错误：

错误1 #

console.error
Error
Uncaught [TypeError: Cannot read properties of undefined (reading 'length')] at
at reportException (/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)

错误2 #

135 | render()
at partRule (node_modules/styled-components/src/utils/isStaticRules.js:6:16)
at e.warnTooManyClasses [as generateAndInjectStyles) (node_modules/styled-components/src/models/Com node_modules/styled-components/src/models/StyledComponent.js:90:5)
at $as ( at WrappedStyledComponent (node_modules/styled-components/src/models/StyledComponent.js:128:44)

调试步骤 #

• 注释掉DetailsPage组件内部所有内容，仅保留外层的DetailsWrapper：

return (
        <DetailsWrapper>
           // 注释掉内部所有内容...
        </DetailsWrapper>
)

测试仍抛出相同错误；

• 将组件改为直接返回原生div时，测试用例通过：

return (
    <div data-testid="details-wrapper-select">hello</div> 
)

• 但只要把div嵌套到DetailsWrapper内部，错误就会重现：

return (
        <DetailsWrapper>
            <div data-testid="details-wrapper-select">hello</div>
        </DetailsWrapper>
)

补充说明：DetailsWrapper是一个未传入任何props的styled.div。

内容的提问来源于stack exchange，提问作者orange_ball_ss