0

我正在为我的组件编写测试，这些组件在应用程序中运行良好。导入和使用它们效果很好，但让它们一起工作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.

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

4

3 回答 3

1

运行 jest 时，您的整个构建系统不存在 - 在本例中为 webpack。所以像这样的导入'!svg-react-loader!../../images/svg-icons/github.svg?name=GithubIcon'会抛出一个错误（或者在你的情况下可能返回未定义？）。

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

于 2020-02-05T16:46:01.870 回答
1

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

有两件事要尝试：

将 index.js 更改为

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

或者，

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

于 2020-02-05T16:13:09.127 回答
0 
export { default as Social } from './Social'

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

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

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

于 2020-02-05T06:08:31.200 回答