Question

我正在为我的Song组件编写测试。代码在浏览器中按预期工作，然而，它在我的测试中突破。

虽然我已经弄清楚问题所在并且解决方法不好，但我并不完全明白问题是什么，为什么我的解决方案有效。

破旧

Song组件导入AlbumArtContainer和AvatarContainer：

import AirbnbPropTypes from 'airbnb-prop-types'
import PropTypes from 'prop-types'
import React from 'react'

import './_styles/Song.scss'
import { ListGroupItemLink } from 'Desktop/components/common'
import { Action, ActionList } from 'Desktop/components/common/actions'
import {
  AlbumArtContainer,
  ArtistContainer } from 'Desktop/containers/common/music'

export default class Song extends React.Component {
  // ... redacted code
}

我在SongContainer和AlbumArtContainer的同一目录中有AvatarContainer个组件：

import { connect } from 'react-redux'

import { songs } from 'Common/api'
import { Song } from 'Desktop/components/common/music'

const mapStateToProps = (state, { id }) => {
  // ... redacted code
}

const SongContainer = connect(mapStateToProps)(Song)

export default SongContainer

在该目录中，我有一个index.js文件来导出所有内容：

export AlbumArtContainer from './AlbumArtContainer'
export ArtistContainer from './ArtistContainer'
export SongContainer from './SongContainer'

Song.test.jsx导入Song：

import Action from 'Desktop/components/common/actions/Action'
import Song from 'Desktop/components/common/music/Song'

describe("<Song>", () => {
  // ... redacted tests
})

运行此文件的测试会引发以下错误：

-> % npm run test client/src/Desktop/components/common/music/__tests__/Song.test.jsx

> @ test /home/mightyspaj/Dev/Projects/vibite/client
> jest "client/src/Desktop/components/common/music/__tests__/Song.test.jsx"

 FAIL  src/Desktop/components/common/music/__tests__/Song.test.jsx
  ● Test suite failed to run

    Invariant Violation: You must pass a component to the function returned by connect. Instead received undefined

      at invariant (node_modules/invariant/invariant.js:42:15)
      at wrapWithConnect (node_modules/react-redux/lib/components/connectAdvanced.js:101:29)
      at Object.<anonymous> (src/Desktop/containers/common/music/SongContainer.jsx:19:62)
      at Object.<anonymous> (src/Desktop/containers/common/music/index.js:1:521)
      at Object.<anonymous> (src/Desktop/components/common/music/Song.jsx:8:14)
      at Object.<anonymous> (src/Desktop/components/common/music/__tests__/Song.test.jsx:2:13)
      at next (native)
      at next (native)
at process._tickCallback (internal/process/next_tick.js:109:7)

这是因为它正在阅读SongContainer，而Song正在undefined内导入SongContainer。这意味着connect()在传递Song时会抛出错误，因为它需要一个组件。

但是如果我直接从他们的文件而不是他们的模块中导入AlbumArtContainer和AvatarContainer {：1}}：

SongContainer

然后在import AlbumArtContainer from 'Desktop/containers/common/music/AlbumArtContainer' import ArtistContainer from 'Desktop/containers/common/music/ArtistContainer'内正确导入Song，它运行正常。我不确定为什么会这样，或者为什么它在浏览器中工作正常而不是我的测试，那么究竟是什么问题呢？

我也不想直接从他们的文件导入组件（这就是我从他们的模块导入它们的原因），所以我目前的解决方案只是一种解决方法。

Answer 1

通过进一步调查，我意识到问题是由于循环依赖性。

虽然它不是我最初想要的解决方案，但我已经删除了index.js文件，并且还使用默认导入更改了我的导入以直接从其文件导入组件

这阻止了循环依赖。

从模块导入组件在浏览器中工作，但在测试中中断

破旧

1 个答案: