Cypress测试被Styled Components扩展的React组件时出现初始化错误怎么办

问题详情 #

开发React组件库时，使用Cypress进行组件测试，大部分测试正常，但测试被Styled Components扩展的基础组件Flexbox时，抛出错误：

(uncaught exception)ReferenceError: Cannot access 'Flexbox' before initialization

测试扩展Flexbox的组件（如StyledSkeletonCard）时无异常，且所有组件在生产应用中运行正常。

相关代码示例 #

基础组件Flexbox（报错来源） #

const StyledFlexbox = styled.div`
    ...styles
`

export function Flexbox(props) {
    return <StyledFlexbox  {...props} />
}

扩展Flexbox的组件 #

import { Flexbox } from "../Flexbox"

const StyledSkeletonCard = styled(Flexbox)`
   ...styles
`

Flexbox的Cypress测试代码 #

describe("<Flexbox />", () => {
    it("renders <Flexbox /> component", () => {
        cy.mount(
            <Flexbox data-testid="testid">
                Hello
            </Flexbox>
        )
        cy.get('[data-testid="testid"]').should("exist")
    })
})

问题原因 #

这是循环依赖+ES模块初始化顺序导致的：

• StyledSkeletonCard导入了Flexbox并将其作为styled组件的基类，形成隐性循环依赖（测试环境中加载Flexbox时，StyledSkeletonCard已提前引用未初始化的Flexbox）。
• 生产打包工具（如Webpack）会自动处理这类循环依赖，但Cypress组件测试环境的模块加载机制未做相同处理，导致初始化顺序冲突。

修复方案 #

方案1：调整组件定义与导出顺序 #

将Flexbox的函数定义改为函数表达式并提前导出，确保它在被外部引用前完成初始化：

// 先定义并导出Flexbox函数
export const Flexbox = (props) => {
    return <StyledFlexbox {...props} />
}

// 再定义Styled组件
const StyledFlexbox = styled.div`
    ...styles
`

方案2：拆分Styled组件与业务组件 #

将基础样式组件和业务逻辑组件分离，切断循环依赖链条：

1. 创建StyledFlexbox.js：

export const StyledFlexbox = styled.div`
    ...styles
`

2. 修改Flexbox.js：

import { StyledFlexbox } from "./StyledFlexbox"

export function Flexbox(props) {
    return <StyledFlexbox {...props} />
}

方案3：在测试中隔离依赖 #

在Flexbox的测试文件中，mock掉引用它的组件，避免循环加载：

import { Flexbox } from "../Flexbox"

before(() => {
    // Mock掉引用Flexbox的组件，阻止其实际导入
    cy.stub(require.resolve("../StyledSkeletonCard"), () => ({
        __esModule: true,
        default: () => null,
    }))
})

describe("<Flexbox />", () => {
    it("renders <Flexbox /> component", () => {
        cy.mount(
            <Flexbox data-testid="testid">
                Hello
            </Flexbox>
        )
        cy.get('[data-testid="testid"]').should("exist")
    })
})

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