Image imports that use typescript alias returns undefined

[ritchieanesco]

Given I have the following typescript configuration.

  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/images*": ["./src/images/*"]
    },
    ...
  },

And jest configuration:

{
  rootDir: "src/",
  moduleDirectories: ["node_modules", "src"],
  moduleFileExtensions: ["svelte", "ts", "js"],
  testPathIgnorePatterns: ["/node_modules/", "/dist/"],
  transform: {
    "^.+\\.svelte$": [
      "svelte-jester",
      {
        preprocess: "./svelte.config.js",
      },
    ],
    "^.+\\.js$": "./babel.config.js",
    "^.+\\.ts$": "ts-jest"
  },
  testEnvironment: "jsdom",
  moduleNameMapper: {
      ".*\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/file-mock.js"
    },
}

And I import an image in svelte file

<script lang="ts">
  import airplane from "@/images/airplane.png"
</script>

{#if airplane}
  <img src={airplane} />
{/if}

When I run a test to validate an image exists the test fails because image import returns undefined. However, If I import the image to a typescript file and export it out as part of an object so it can be consumed in the svelte file, then it works.

Any suggestions what this could be?

[sebastianrothe]

Do you use Sveltekit/Sapper as well? If so, then you need to add an alias to your sveltekit-config as well.

Am I rright, that all image imports are resolved to file-mock.js?