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 / 测试 /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

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

要尝试的两件事：

将index.js更改为

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

或者

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

中

Answer 2

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

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

Answer 3

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

您可以像上面的代码片段一样尝试一下吗？

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

不是import Social from '../components/Social'吗？您尝试将其导入为import Social from '../Social'

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

3 个答案: