我正在尝试使用Enzyme测试create-rect应用程序中的React UI组件。我有一个使用mount工作的基本测试组件。这表明(至少对我来说(,我已经正确地设置了酶及其依赖性。
每当我试图在我的一个更复杂的组件上运行测试时,我都会收到一个错误,比如:
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的组件。以下是测试脚本中该组件的mount语句:
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组件中导入,并带有以下导入语句:
import Login from '../navigation/Login'
失败的测试脚本和运行的应用程序之间的唯一区别是Container组件不同。然而,我的超级简单的测试(装载工作(使用了以相同方式导入的相同测试容器组件。
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",
关于如何找到这里的故障条件,有什么建议吗?我现在要把头发扯掉了。
好吧,当我再次通过这个问题时,我注意到我的一个导入语句实际上包含了文件后缀,而不是省略了它。我想我已经配置了这个项目,这样我就可以跳过后缀了。这适用于正常的构建,但在测试运行中失败了。因此,如果我在测试脚本中的Login组件的导入中添加".jsx",那么我的测试现在就可以工作了。
现在来弄清楚为什么会出现这种情况;在之前的项目中,这不是问题,因为我没有使用create-react应用程序,因此手动构建了webpack.config.js。