如何修改stencil.config.ts支持SVG加载，解决Stencil单元测试报错？

问题原因 #

Jest默认无法解析SVG这类非JavaScript/TypeScript资源文件，当测试代码导入SVG时，Jest会尝试将SVG的XML内容当作JS代码执行，从而抛出Unexpected token '<'的语法错误。

解决方案 #

通过stencil.config.ts的testing.jest配置项添加moduleNameMapper，将SVG文件的导入映射为模拟的资源路径或stub，避免Jest解析原始SVG内容。以下提供两种可行方案：

方案1：使用jest-transform-stub（推荐）

1. 先安装依赖包：

npm install jest-transform-stub --save-dev

2. 修改stencil.config.ts：

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

export const config: Config = {
  testing: {
    jest: {
      moduleNameMapper: {
        '\\.svg$': 'jest-transform-stub'
      }
    }
  }
};

这个stub会将所有SVG导入替换为一个空对象的代理，组件中使用的src属性能正常获取到有效值，不会影响渲染测试。

方案2：自定义SVG模拟文件（无需额外依赖）

1. 在项目中创建模拟文件src/__mocks__/svgMock.ts：

// 返回一个模拟的URL字符串，匹配组件中对SVG的使用场景
export default 'mock-svg-url';

2. 修改stencil.config.ts：

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

export const config: Config = {
  testing: {
    jest: {
      moduleNameMapper: {
        '\\.svg$': '<rootDir>/src/__mocks__/svgMock.ts'
      }
    }
  }
};

这种方式更灵活，你可以根据测试需求自定义返回的模拟值，比如特定的URL字符串。

测试验证 #

修改配置后重新运行单元测试，Jest会正确处理SVG导入，不再抛出语法错误。如果需要验证Logo组件是否正确渲染SVG，可以在测试用例中添加断言：

it('renders the logo', () => {
  const page = await newSpecPage({ components: [LogoComponent], html: '<logo-component></logo-component>' });
  const imgElement = page.root.shadowRoot.querySelector('img');
  expect(imgElement.src).toBe('mock-svg-url'); // 对应自定义模拟文件中的返回值
});

内容的提问来源于stack exchange，提问作者Zahra Talebi