类型错误：符号不是函数

Question

页脚视图.tsx

\n

import styles from './Footer.module.scss';\n\nimport logo from 'assets/images/logo_header.svg';\nimport { ReactSVG } from 'react-svg';\nimport iconTwitter from 'assets/images/logo_twitter.svg';\nimport iconFacebook from 'assets/images/logo_facebook.svg';\nimport iconYoutube from 'assets/images/logo_youtube.svg';\nimport { proxyConfSelector } from 'core';\nimport { useSelector } from 'react-redux';\nimport { useTranslation } from 'hooks/useTranslation';\n\nconst Footer = () => {\n  const proxyConf = useSelector(proxyConfSelector);\n  const year = new Date().getFullYear();\n  const [t, lang] = useTranslation();\n\n  // eslint-disable-next-line no-console\n  console.log('Language', [t, lang]);\n\n  return (\n    <div className={styles.footerContainer}>\n      <a href={`https://fodjan.com/${lang === 'de' ? 'de/' : 'en/'}`}>\n        <ReactSVG className={styles.footerLogo} src={logo} />\n      </a>\n      <div className={styles.love}>\n        Made with <span className={styles.heart}>\xe2\x99\xa5</span> in Germany\n      </div>\n      <div className={styles.socialMediaContainer}>\n        <div className={styles.socialList}>\n          <a\n            href="https://twitter.com/fodjan?lang=de"\n            target="_blank"\n            rel="noopener noreferrer"\n          >\n            <img src={iconTwitter} alt="twitter icon" />\n          </a>\n          <a\n            href="https://www.facebook.com/fodjan.de/"\n            target="_blank"\n            rel="noopener noreferrer"\n          >\n            <img src={iconFacebook} alt="facebook icon" />\n          </a>\n          <a\n            href="https://www.youtube.com/channel/UCKwdzpWq1uy0sblX3_VIKHg"\n            target="_blank"\n            rel="noopener noreferrer"\n          >\n            <img src={iconYoutube} alt="youtube icon" />\n          </a>\n        </div>\n      </div>\n      <div className={styles.links}>\n        <a\n          href={proxyConf ? proxyConf.fe1Url + '/infos/terms' : ''}\n          target="_blank"\n          rel="noopener noreferrer"\n        >\n          {t('AGB')}\n        </a>\n        <a\n          href={proxyConf ? proxyConf.fe1Url + '/infos/policy' : ''}\n          target="_blank"\n          rel="noopener noreferrer"\n        >\n          {t('Datenschutz')}\n        </a>\n        <a\n          href={proxyConf ? proxyConf.fe1Url + '/infos/imprint' : ''}\n          target="_blank"\n          rel="noopener noreferrer"\n        >\n          {t('Impressum')}\n        </a>\n      </div>\n      <div className={styles.copyright}>\n        \xc2\xa9 {year} fodjan GmbH. {t('Alle Rechte vorbehalten.')}\n      </div>\n    </div>\n  );\n};\n\nexport default Footer;\n\n

\n

页脚View.test.tsx

\n

import FooterView from '../FooterView';\nimport { render } from '@testing-library/react';\nimport * as redux from 'react-redux';\n\nconst config = {\n  fe1Url: 'www.fodjan.com',\n  feVersion: '1.0',\n};\n\nconst spyOnUseSelector = () => {\n  jest.spyOn(redux, 'useSelector').mockImplementation(selector => {\n    switch (selector.name) {\n      case 'proxyConfSelector':\n        return config;\n      default:\n        return jest.fn();\n    }\n  });\n  jest.mock('hooks/useTranslation', () => ({\n    useTranslation: jest.fn().mockImplementation(() => [jest.fn(), 'en']),\n  }));\n};\n\ntest('check if rendered correctly', () => {\n  spyOnUseSelector();\n  const renderCheck = render(<FooterView />);\n  expect(renderCheck.container.firstChild).toMatchSnapshot();\n});\n\n

\n

错误

\n

 TypeError: symbol is not a function\n\n      24 | test('check if rendered correctly', () => {\n      25 |   spyOnUseSelector();\n    > 26 |   const renderCheck = render(<FooterView />);\n         |                       ^\n      27 |   expect(renderCheck.container.firstChild).toMatchSnapshot();\n      28 | });\n      29 | \n

\n

我无法弄清楚为什么测试失败而我得到了TypeError: symbol is not a function。在我看来，似乎有些东西没有被嘲笑，但我不知道。

\n

Answer 1

媒体文件没有被嘲笑。

使用以下内容创建图像模拟文件：

module.exports = 'test-file-stub';

然后在根文件夹中添加一个 jest 配置文件：

/jest.config.js

包含内容（如果您已经有一个，只需添加moduleNameMapper对象）：

module.exports = {
  moduleNameMapper: {
    '\\.(png|jpg|webp|ttf|woff|woff2|svg|mp4)$': '<rootDir>/path-to-fileMock.js'
  }
}

那应该解决它。

更多关于这里： https: //jestjs.io/docs/webpack