我怎样才能改变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.js(Jest 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文件?
1条答案
按热度按时间wyyhbhjk1#
我也有同样的问题。我可以通过以下方式解决它:
1.安装
jest-svg-transformer
1.在
moduleNameMapper
中使用Transformer在stencil.config.ts
中设置请告知是否有帮助。