Question

我正在尝试使用Enzyme在create-react-app应用程序中测试React UI组件。我有一个使用安装架的基本测试组件。这表明（至少对我而言），我已经正确设置了酶及其依赖性。

每当我尝试对一个较复杂的组件之一进行测试时，都会出现诸如以下的错误：

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是正确的；我整理了一套非常基础的组件并对其进行了测试，该测试能够成功安装（）。因此，我认为任何建议的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'

失败的测试脚本和可以运行的应用程序之间的唯一区别是容器组件不同。但是，在安装工作的超级简单测试中，我使用了以相同方式导入的相同测试容器组件。

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",

有关如何找到此处的故障条件的任何建议？此时我正在拔头发。

Answer 1

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

现在开始弄清楚为什么是这种情况；在以前的项目中，我没有使用create-react-app，因此是手动构建了webpack.config.js，这不是问题。

不变违规：元素类型无效：酶错误-帮助诊断？

1 个答案: