reactjs - 不变违规 : Element type is invalid: error with Enzyme - help diagnosing?

标签 reactjs enzyme

我正在尝试使用 Enzyme 来测试 create-react-app 应用程序中的 React UI 组件。我有一个使用 mount 工作的基本测试组件。这表明(至少对我而言)我已经正确设置了 enzyme 及其依赖项。

每当我尝试在我的一个更复杂的组件上运行测试时,我都会收到如下错误:

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
      at invariant (node_modules/react-dom/cjs/react-dom.development.js:55:15)
      at createFiberFromTypeAndProps (node_modules/react-dom/cjs/react-dom.development.js:9958:11)
      at createFiberFromElement (node_modules/react-dom/cjs/react-dom.development.js:9979:15)
      at reconcileSingleElement (node_modules/react-dom/cjs/react-dom.development.js:13654:23)
      at reconcileChildFibers (node_modules/react-dom/cjs/react-dom.development.js:13711:35)
      at reconcileChildren (node_modules/react-dom/cjs/react-dom.development.js:14078:28)
      at updateHostComponent (node_modules/react-dom/cjs/react-dom.development.js:14423:3)
      at beginWork (node_modules/react-dom/cjs/react-dom.development.js:15087:14)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:17820:12)
      at workLoop (node_modules/react-dom/cjs/react-dom.development.js:17860:24)
      at renderRoot (node_modules/react-dom/cjs/react-dom.development.js:17946:7)
      at performWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:18837:7)
      at performWork (node_modules/react-dom/cjs/react-dom.development.js:18749:7)
      at performSyncWork (node_modules/react-dom/cjs/react-dom.development.js:18723:3)
      at requestWork (node_modules/react-dom/cjs/react-dom.development.js:18592:5)
      at scheduleWork (node_modules/react-dom/cjs/react-dom.development.js:18401:5)
      at scheduleRootUpdate (node_modules/react-dom/cjs/react-dom.development.js:19069:3)
      at updateContainerAtExpirationTime (node_modules/react-dom/cjs/react-dom.development.js:19097:10)
      at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:19154:10)
      at ReactRoot.render (node_modules/react-dom/cjs/react-dom.development.js:19416:3)
      at /Users/eric/Development/roadmapsftw/develop/web/node_modules/react-dom/cjs/react-dom.development.js:19556:14
      at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:18952:10)
      at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:19552:5)
      at Object.render (node_modules/react-dom/cjs/react-dom.development.js:19613:12)
      at Object.render (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:352:114)
      at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:130:16)
      at mount (node_modules/enzyme/build/mount.js:21:10)
      at Context.<anonymous> (tests/test-navigation-Login.js:20:21)

当我用谷歌搜索错误消息本身时,我得到了很多暗示组件导入错误的结果。但是,我怀疑这里的情况是否如此,因为组件可以在多个浏览器中成功运行;我似乎无法使用 mount() 或 shallow() 用 Enzyme 创建它们。

我认为我的项目设置对于 Enzyme 是正确的;我将一组非常基本的组件和对它们的测试放在一起,该测试能够成功 mount()。因此,我认为任何建议的 setupTest.js 配置(例如设置适配器)或我调用测试脚本的方式都不是问题。

我真的不清楚如何从这里进行调试。堆栈跟踪的开头是我的测试脚本中的一行,我在其中安装了一个名为 Login 的组件。这是测试脚本中该组件的安装语句:

const mounted = mount(
  <IntlProvider locale='en'>
    <MemoryRouter initialEntries={['/Login']}>
      <TestContainer state={loginState}>
        <Login />
      </TestContainer>
    </MemoryRouter>
  </IntlProvider>
)

以下是测试脚本中失败组件的导入语句。

import { IntlProvider } from 'react-intl'
import { MemoryRouter } from 'react-router-dom'
import { TestContainer } from './TestUtils.js'
import Login from '../src/navigation/Login'

当通过 Home 组件访问时,Login 组件在浏览器中工作正常;它使用以下导入语句导入到 Home 组件中:

import Login from '../navigation/Login'

失败的测试脚本与正常运行的应用程序之间的唯一区别是 Container 组件不同。但是,我的 mount 工作的 super 简单测试使用以相同方式导入的相同测试容器组件。

来自 package.json 的相关版本:

"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-intl": "^2.7.2",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.1",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.7.0",

关于如何找到这里的失败条件有什么建议吗?在这一点上,我快要抓狂了。

最佳答案

好吧,当再一次通过这个问题时,我注意到我的一个导入语句实际上包含了文件后缀而不是省略了它。我以为我已经配置了项目,以便我可以跳过后缀。这适用于正常构建,但在测试运行中失败。因此,如果我在测试脚本中将“.jsx”添加到登录组件的导入中,我的测试现在就可以运行了。

现在开始弄清楚为什么会这样;在我没有使用 create-react-app 并因此手动构建 webpack.config.js 的先前项目中这不是问题。

关于reactjs - 不变违规 : Element type is invalid: error with Enzyme - help diagnosing?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53795848/

相关文章:

reactjs - 连续三张牌而不是一列中的所有牌

javascript - 用 enzyme 和 connect() 进行开 Jest 测试,给出 `import connectAdvanced from ' ../components/connectAdvanced';`

reactjs - 如何使用jest和enzyme测试react中的API调用?

javascript - 用 Jest 和 enzyme 进行测试。监视 react 组件的方法

reactjs - react native 问题 : Module does not exist in the Haste module map

javascript - react onClick 不触发 es6

reactjs - Qt "passthrough"或 "container"小部件

reactjs - 测试 withRouter 中包含的 react 组件(最好使用 jest/enzyme)

javascript - 为什么 JEST 测试中的 getCompulatedStyle() 返回与 Chrome/Firefox DevTools 中的计算样式不同的结果

javascript - 运行构建时 react 路由器动态 url 不起作用