Как исправить «Инвариантное Нарушение», вызванное циклическими зависимостями в response-redux - PullRequest
Новая
       12

Как исправить «Инвариантное Нарушение», вызванное циклическими зависимостями в response-redux

5 голосов
/ 11 ноября 2019

У меня есть проект React, настроенный так:

enter image description here

Это простое приложение. Dashboard имеет UserListContainer, содержащий UserList, в котором перечислены четыре пользователя с их идентификатором и именем. UserList получает пользователей от Data.ts

Само приложение прекрасно работает и отображает четырех пользователей. Но как только я пытаюсь проверить 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)

Проблема в основном в том, что, хотя мыНе используйте Dashboard при поверхностном рендеринге UserList, React все еще пытается его построить. Я предполагаю, что это происходит потому, что мы обращаемся к Data через индекс Dashboard, поэтому React также попытается разрешить Dashboard и его импорт, а именно UserListContainer, поскольку они экспортируются через один и тот же индексный файл. Когда я импортирую пользователей напрямую, а не через индекс, проблема исчезает.

Мы исправили эту проблему, сломав циклическую зависимость, но если я снова столкнусь с ошибкой, я хочу знать другие способы ее устранения. Мне также хотелось бы понять, почему веб-приложение все еще работает нормально, а тесты не пройдены.

Кроме того, существует ли способ предотвратить разрешение React импорта и экспорта при использовании ферментов с малым рендерингом?

Users / __ tests __ / UserList.test.tsx 

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

Users / 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>
)

Dashboard / index.ts 

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

Dashboard / Data.ts 

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

Dashboard / Dashboard.tsx 

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

Users / UserListContainer.tsx 

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