javascript - 如何修复React-Redux中由循环依赖引起的 'Invariant Violation'

我有一个像这样的React项目:

这是一个简单的应用程序。 Dashboard有一个UserListContainer，其中包含一个UserList，其中列出了四个用户的ID和名称。 UserList从Data.ts获取用户

该应用程序本身运行正常，并显示四个用户。但是，一旦我尝试使用 enzyme 浅渲染来测试UserList，测试就会给我以下错误消息:

Invariant Violation: You must pass a component to the function returned by connect. Instead received undefined
      at invariant (node_modules/invariant/invariant.js:40:15)
      at wrapWithConnect (node_modules/react-redux/lib/components/connectAdvanced.js:97:33)
      at Object.<anonymous> (src/Users/UserListContainer.tsx:4:34)
      at Object.<anonymous> (src/Users/index.ts:1:1)
      at Object.<anonymous> (src/Dashboard/Dashboard.tsx:2:1)
      at Object.<anonymous> (src/Dashboard/index.ts:1:1)
      at Object.<anonymous> (src/Users/UserList.tsx:2:1)
      at Object.<anonymous> (src/Users/__tests__/UserList.test.tsx:3:1)

基本上，问题在于，即使我们在浅浅显示UserList时不使用仪表板，React仍会尝试构建它。我猜是因为我们通过Data索引访问Dashboard，所以React也将尝试解析Dashboard及其导入，即UserListContainer，因为它们是通过同一索引文件导出的。当我直接导入用户而不是通过索引导入用户时，问题消失了。

我们通过打破循环依赖关系解决了此问题，但是如果再次遇到该错误，我想知道其他解决方法。我还想了解为什么在测试失败的情况下，Web应用程序仍然可以正常运行。

另外，有没有一种方法可以防止使用 enzyme 浅提纯时React解决 import/export 问题？

用户/__测试__/UserList.test.tsx

test("reproduce the problem", () => {
  const wrapper = shallow(<UserList />)
  console.log(wrapper)
  expect(1).toBe(1)
})

用户/UserList.tsx

import { Data } from "../Dashboard"
export const UserList: React.FC = () => (
  <React.Fragment>
    {Data.users.map(user => (
      <div>
        <code>{user.id} - </code>
        <code>{user.name}</code>
      </div>
    ))}
  </React.Fragment>
)

仪表板/index.ts

export { Dashboard } from "./Dashboard" // not used but still resolved
export { Data } from "./Data" // actually used

仪表板/Data.ts

export const Data = {
  users: [
    { id: "user1", name: "Albert" },
    { id: "user2", name: "Bertha" },
    { id: "user3", name: "Chloe" },
    { id: "user4", name: "Doug" }
  ]
}

仪表板/Dashboard.tsx

import { UserListContainer } from "../Users"
export const Dashboard: React.FC = () => {
  return <UserListContainer />
}

用户/UserListContainer.tsx

import { UserList } from "./UserList"
export const UserListContainer = connect()(UserList)

最佳答案

解决该问题的一种方法是对仪表板文件中的导入重新排序:

export { Data } from "./Data" // actually used
export { Dashboard } from "./Dashboard" // not used but still resolved

Web应用程序在大多数情况下都可以使用，因为它将从index.tsx文件(或任何输入文件名)开始解析，然后从那里开始解析。另一方面，笑话从您的测试文件开始，仅解决这些导入(您可以在这里找到一个很好的解释为什么会发生这种情况:https://railsware.com/blog/how-to-analyze-circular-dependencies-in-es6/)。

我们在项目中遇到了类似的问题，很不幸，除了重新排序导入顺序和更好地构建文件结构外，没有其他解决方案。

您还可以做的一种“修改”是添加:

import 'problematic_module'

到您开玩笑的setupFilesAfterEnv。这样，模块将在每次测试之前解决(但我仅建议将其作为最后的手段)。

关于javascript - 如何修复React-Redux中由循环依赖引起的 'Invariant Violation'，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58804088/

Userlist

javascript - 如何修复React-Redux中由循环依赖引起的 'Invariant Violation'