为什么 Cypress 在扩展样式组件时返回错误？

Question

我正在开发一个 React 组件库，我需要添加组件测试。为此，我使用赛普拉斯。大多数测试都运行良好，除了我稍后使用样式组件扩展的组件的测试。在这些上，我收到此错误：

(uncaught exception)ReferenceError: Cannot access '<Component>' before initialization

在我扩展这些第一个组件的组件上，测试正在运行。我做错了什么？

这是我的代码：

第一个组件，我收到错误的那个组件：

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

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

第二个组件，我将其扩展：

import { Flexbox } from "../Flexbox"

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

以及Flexbox组件的测试：

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

返回：

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

此外，当我在应用程序中使用这些组件中的任何一个时，它们都运行良好，并且我没有收到任何错误。谢谢您的解答！

Answer 1

问题是您通过从

cssVariables

获取

/lib/index.ts

来创建组件之间的依赖关系。当您从组件测试访问该组件时，属于

lib

一部分的所有其他导入/导出组件也会启动。

我还没有尝试理清依赖关系（这是一项艰巨的工作），但简单的解决方法是also从

Flexbox

获取

/lib/index.ts

组件。

// import { Flexbox } from "../Flexbox"            // not this import!
import { cssVariables, Flexbox } from "../../.."

如果我是你，我会尝试将组件解耦，请参阅为什么 SOLID 原则至关重要...

紧耦合意味着一组类相互依赖，为了提高代码的可维护性和可读性，应该避免这种情况。