首页 文章

使用SVG导入对样式组件进行单元测试

提问于
浏览 次
3

我正在升级React项目的依赖项 . 我将样式组件从 1.4.4 升级到 2.5.0-1 . 我没想到任何重大变化，因为我读到样式组件v2是v1的替代品 .

我没有在Web应用程序中看到任何重大更改，但我的测试用例已被破坏 .

考虑以下，愚蠢和无用的测试 .

test('does something', () => {
  expect(true).toBe(true);
});

正如所料，测试工作 . 但是，只要我尝试在测试文件中导入样式化组件，它就会失败 .

我添加了以下导入 .

import {Container} from './styled';

因此定义了Container样式组件：

export const Container = styled.div`
  width: 80%;
  display: flex;
  flex-direction: column;
  transition: opacity 0.25s ease-in-out;
`;

我收到以下错误：

Cannot create styled-component for component: [object Object]

现在，我无法理解发生了什么 . 为什么我不能导入样式组件？

EDIT

问题在于导入svg资产的样式组件 . 见下面的答案 .

javascript reactjs jestjs styled-components

1 回答

  • 1

    在一次评论出一个样式组件后，我发现问题出在使用svg资产的样式组件上 . 考虑以下样式组件

    import Edit from 'assets/edit-icon.svg';

export const EditIcon = styled(Edit)`
  transition: opacity 0.25s ease-in-out;
  position: absolute;
  opacity: 0;
  z-index: 2;

  &:hover {
    transform: scale(1.05);
  }

  &:active {
    transform: scale(0.93);
  }
`;

    现在，我们的单元测试无法将SVG资产导入为React Components（通过Webpack处理） . 因此，我们需要通知我们的单元测试忽略SVG资产 .

    为此，我们需要配置jest .

    "moduleNameMapper": {
      "\\.(svg)$": "<rootDir>/test/__mocks__/svgMock.js"
    }

    并在svgMock.js

    module.exports = '';

    在我现有的设置中，我有

    module.exports = {};

    虽然这与styled-components-1.x一起使用但却失败了> = styled-components-2.x.

    以下博客文章向我指出了答案：https://diessi.ca/blog/how-to-exclude-css-images-anything-from-unit-tests/

    回复于

相关问题