SvelteKit使用svelte-jester时SVG导致覆盖率分支未覆盖问题求解

问题根因 #

这个覆盖率异常并非业务代码存在未覆盖分支，而是Svelte编译组件时，会对绑定到DOM属性的变量自动插入隐式的空值兜底逻辑，类似src={logo == null ? '' : logo}的三元判断，这部分编译生成的代码会被Jest的覆盖率统计识别为未覆盖分支。如果你的SVG Mock当前返回空值/undefined，会进一步放大这个统计异常。

可行解决方案 #

方案1：修改SVG Mock返回值（最简单快速） #

你当前配置中把SVG文件映射到了<rootDir>/src/jest/mock.js，将这个mock文件的内容改为返回非空的固定字符串即可：

// src/jest/mock.js
export default 'test-mock-svg-url';

修改后重新跑测试，隐式分支的真值路径会被正常命中，覆盖率统计即可恢复正常。

方案2：更换Jest覆盖率提供者为V8（一劳永逸） #

V8引擎原生的覆盖率统计基于原始源代码映射，不会统计转译生成的隐藏逻辑，只需在jest.config.js中新增配置即可：

export default {
  // 保留原有所有配置，新增下面一行
  coverageProvider: 'v8'
}

这个方案可以解决所有Svelte编译生成的隐式代码导致的覆盖率异常问题。

方案3：手动忽略隐式分支 #

如果前两个方案不适用，可以在Svelte组件的script标签顶部添加istanbul忽略规则，豁免隐式分支的统计：

<script lang="ts">
  /* istanbul ignore next */
  import { page } from '$app/stores';
  import logo from './svelte-logo.svg';
</script>

额外提示：你当前的测试用例存在逻辑问题，组件中只有class="corner"的div，没有文本内容为Corner的元素，测试实际无法通过，可以调整为查询img的alt属性验证渲染结果：

test('Header renders correctly', () => {
  const { getByAltText } = render(Header);
  expect(getByAltText('SvelteKit')).toBeInTheDocument();
});

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