开玩笑 - `无法为组件创建样式组件：未定义`

Question

使用

jest

测试我的应用程序时遇到以下错误：

 FAIL  
  ● Test suite failed to run

    Cannot create styled-component for component: undefined.

      30 |
      31 | 
    > 32 | export const BackgroundVector = styled(Background)`
         |                                 ^
      33 |   position: fixed;
      34 |   left: 0;
      35 |   bottom: 0;

Background

是我在此文件顶部导入的 svg，如下所示：

import { ReactComponent as Background } from '../images/Background.svg';

我不太确定如何解决这个错误。在我的

package.json

中，我已将 SVG 文件映射到

fileMock.js

，这只是

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

。我还应该做些什么来解决这个问题吗？

Answer 1

您可以尝试以下方法：

export const BackgroundVector = styled(props => <Background {...props}/>)`
  //Your styles here
`

这解决了我的问题。

Answer 2

我遇到了同样的问题。为了调试它，我在出现错误的行上方添加了一个控制台日志。果然，该组件是未定义的。事实证明，问题是 babel.config.js 中的别名定义不正确。更正 babel.config.js 中的别名设置后，一切都按预期工作。然而，令我困惑的是，为什么该项目能够使用不正确的别名成功运行？该错误仅在使用 Jest 时出现。