I started a new project provided by SvelteKit and added svelte-jester. I am able to run the code and tests but I get an odd coverage problem. The Header component has an SVG file which shows up as an uncovered branch and I'm not sure how to address it.
// Header.svelte
<script lang="ts">
import { page } from '$app/stores';
import logo from './svelte-logo.svg';
</script>
<header>
<div class="corner">
<a href="https://kit.svelte.dev">
<img src={logo} alt="SvelteKit" />
</a>
</div>
</header>
// Header.test.js
import '@testing-library/jest-dom'
import { render } from '@testing-library/svelte'
import Header from '../Header.svelte';
test('shows proper heading when rendered', () => {
const { getByText } = render(Header);
expect(getByText('Corner')).toBeInTheDocument();
});
Wondering if anyone else has had this issue and solved it. There is no branch here and logo is not a prop. How do I get test coverage for the src?
Jest Config for reference:
export default {
bail: false,
collectCoverage: true,
coveragePathIgnorePatterns: ['/jest'],
coverageThreshold: {
global: {
branches: 80,
functions: 80,
lines: 80,
statements: 80
}
},
moduleFileExtensions: ["js", "svelte", "ts"],
moduleNameMapper: {
"\\.(svg)$": "<rootDir>/src/jest/mock.js",
"^\\$src(.*)$": "<rootDir>/src$1",
"^\\$lib(.*)$": "<rootDir>/src/lib$1",
"^\\$app(.*)$": [
"<rootDir>/.svelte-kit/dev/runtime/app$1",
"<rootDir>/.svelte-kit/build/runtime/app$1"
]
},
preset: "ts-jest",
roots: ["<rootDir>/src/",],
transform: {
"^.+\\.js$": "babel-jest",
"^.+\\.svelte$": [
"svelte-jester", {
"preprocess": true
}
],
"^.+\\.ts$": "ts-jest"
},
// transformIgnorePatterns: ["node_modules"],
setupFilesAfterEnv: [
"@testing-library/jest-dom/extend-expect",
'./src/jest/setup.js'
]
}
