元素类型无效 - 导出默认和默认导入

Question

我正在为我的组件编写测试，这些组件在应用程序中工作正常。导入和使用它们效果很好，但让它们与react-test-renderer一起工作并没有那么好。例如，我有一个读取配置并呈现链接的社交组件。

./components/Social/social.js

import React from 'react'
import PropTypes from 'prop-types'
import config from '../../../content/meta/config'
import GithubIcon from '!svg-react-loader!../../images/svg-icons/github.svg?name=GithubIcon'
import LinkedInIcon from '!svg-react-loader!../../images/svg-icons/linkedin.svg?name=LinkedInIcon'
import TwitterIcon from '!svg-react-loader!../../images/svg-icons/twitter.svg?name=TwitterIcon'
import InstagramIcon from '!svg-react-loader!../../images/svg-icons/instagram.svg?name=InstagramIcon'
import DevIcon from '!svg-react-loader!../../images/svg-icons/dev.svg?name=DevIcon'
const Social = props => {
const { theme } = props
const items = config.authorSocialLinks
const icons = {
twitter: TwitterIcon,
github: GithubIcon,
linkedin: LinkedInIcon,
instagram: InstagramIcon,
dev: DevIcon,
}
return (
<React.Fragment>
<div className="social">
{items.map(item => {
const Icon = icons[item.name]
return (
<a
href={item.url}
key={item.name}
className="socialLink"
target="_blank"
rel="noopener noreferrer"
title={item.name}
>
<Icon className="svg" />
</a>
)
})}
</div>
{/* --- STYLES --- */}
<style jsx global>
{`
@media screen and (max-width: 450px) {
.social {
width: 95%;
}
}
@media screen and (min-width: 450px) {
.social {
width: 40%;
}
}
.social {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
padding: 20px;
:global(svg) {
width: 30px;
height: 30px;
transition: all 0.5s;
}
&:hover :global(svg) {
fill: ${theme.color.special.attention};
}
}
.svg path {
fill: ${theme.color.brand.primary};
}
.socialLink {
margin: 0 auto;
display: inline-block;
padding: 1px;
text-align: center;
}
`}
</style>
</React.Fragment>
)
}
Social.propTypes = {
theme: PropTypes.object.isRequired,
}
export default Social

./components/Social/index.js

export { default } from './Social'

在我的测试中，我正在导入组件并渲染以进行快照测试。测试：

./components/tests/social.spec.js

import React from 'react'
import { create } from 'react-test-renderer'
import Social from '../Social'
const theme = require('../../theme/theme.json')
describe('Social Component', () => {
it('renders correctly', () => {
const tree = create(<Social theme={theme} />).toJSON()
expect(tree).toMatchSnapshot()
})
})

我只在我的测试中收到错误，而不是在应用程序中。

元素类型无效：预期为字符串(对于内置组件(或类/函数(对于复合组件(，但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查Social的渲染方法。

我尝试了许多小调整，但无济于事。

Answer 1

当运行 jest 时，你的整个构建系统不存在 - 在这种情况下是 webpack。因此，像这样的导入'!svg-react-loader!../../images/svg-icons/github.svg?name=GithubIcon'会抛出错误(或者在您的情况下可能会返回未定义？

如果你想要这些，你需要在 webpack 上下文中运行 jest - https://jestjs.io/docs/en/webpack

Answer 2

我想测试运行程序对桶索引.js文件中的导出默认值感到困惑。

尝试以下两种方法：

将索引.js更改为

import Social from './Social'
export {
social
};

或

如果最终要使用命名导出，为什么不从一开始就这样做呢？将社交更改为导出export const Social = props => {...}和索引文件中的export * from './Social

Answer 3

export { default as Social } from './Social'

你能像上面的代码片段一样尝试一下吗？

我还看到您尝试在social.spec中错误地导入社交组件.js

不应该是import Social from '../components/Social'吗？ 您尝试像import Social from '../Social'一样导入它