Jest.js 由于加载svg文件,模具单元测试失败

4zcjmb1e  于 2023-09-28  发布在  Jest
关注(0)|答案(1)|浏览(152)

我怎样才能改变stencil.config.ts来支持加载SVG文件?
我有一个徽标组件,它加载一个SVG并显示它。我像这样导入徽标svg:

import darkLogo from '../../assets/svgs/logo-dark.svg';

然后我在我的组件中使用了这个SVG:

render() {
    return (
       <div>
          <img src={ darkLogo }/>
        </div>
    );
  }

我在logo-component.spec.ts文件中为这个组件添加了一个单元测试,以确保组件正确呈现。
但在运行测试后,我收到了一个synctax错误,因为加载SVG:

Details:

/app/assets/svgs/logo-dark.svg:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){<svg width="235" height="55" viewBox="0 0 235 55" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                                  ^

SyntaxError: Unexpected token '<'

  3 | } from '@stencil/core';
> 5 | import darkLogo from '../../assets/svgs/logo-dark.svg';
    | ^

我意识到模具使用Jest库进行测试。Jest不能加载SVG文件。我们需要为svg文件添加Transformer到jest.config.jsJest cannot load svg file)。我没有直接使用Jest,所以不能修改jest.config.js。我需要在testing属性(https://stenciljs.com/docs/testing-overview#testing-configuration)中为stencil.config.ts添加自定义配置:

import { Config } from '@stencil/core';

export const config: Config = {
  testing: {
    ...
  }
};

问题是:如何更改stencil.config.ts以支持加载SVG文件?

wyyhbhjk

wyyhbhjk1#

我也有同样的问题。我可以通过以下方式解决它:
1.安装jest-svg-transformer

npm install -D jest-svg-transformer

1.在moduleNameMapper中使用Transformer在stencil.config.ts中设置

testing: {
  transform: {
    "^.+\\.(ts|tsx|js|jsx|css)$": "@stencil/core/testing/jest-preprocessor",
  },
  moduleNameMapper: {
    "^.+\\.svg$": "jest-svg-transformer",
  },
}

请告知是否有帮助。

相关问题