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

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()
  })
})

我只在我的测试中遇到错误，在应用程序中没有。

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of Social.

我尝试了很多小调整都无济于事。

Answer 1

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

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

我还看到您在 social.spec.js

中尝试导入错误的社交组件

不应该是import Social from '../components/Social'吗？您尝试像 import Social from '../Social'

一样导入它

Answer 2

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

尝试两件事：

将index.js更改为

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

或者，

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

Answer 3

开玩笑说，当运行你的整个构建系统不存在时 - 在这种情况下是 webpack。所以像这样的导入 '!svg-react-loader!../../images/svg-icons/github.svg?name=GithubIcon' 会抛出错误（或者在你的情况下可能 return 未定义？）。

如果需要，您需要运行在 webpack 上下文中开玩笑 - https://jestjs.io/docs/en/webpack

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

Element type is invalid - Export default and default import

reactjs

jestjs

react-test-renderer