Cannot import from context="module"

[jacobbogers]

Hello
I export component specific information from svelte components, but I can not import them in any svelte test using svelte-jester

I am using typescript

<script lang="ts" context="module">
	export const prerender = false;
	export const ARROW_STATE = {
		NONE: 1,
		SHOW: 2,
		DOWN: 4
	};
</script>

// other code from the component

I need to import ARROW_STATE from this component for testing

import Arrow, { ARROW_STATE } from '../Arrow.svelte';
import { render, fireEvent } from '@testing-library/svelte'

// rest of the code 

Error log

   src/lib/components/__test__/Arrow.test.ts:1:17 - error TS2614: Module '"*.svelte"' has no exported member 'ARROW_STATE'. Did you mean to use 'import ARROW_STATE from "*.svelte"' instead?

    1 import Arrow, { ARROW_STATE } from '../Arrow.svelte';

[jacobbogers]

OK I am using "https://github.com/ktsn/svelte-jest" and it works, with no issues

[sebastianrothe]

Can you post your jest.config.js, please?

[awmcclain]

We're having the same issue, actually, and I wonder if it's some interaction with compiling the test file. If we switch from a typescript test file to a javascript test file, it works.

jest.config.js

// Import the path aliases from our tsconfig
const tsconfig = require('./tsconfig.json');
let moduleNameMapper = require("tsconfig-paths-jest")(tsconfig);

const actualProcess = process
process.actual = () => actualProcess

const config = {
  verbose: true,
  preset: "ts-jest/presets/js-with-ts",
  transformIgnorePatterns: [
    "node_modules/(?!svelte-router-spa)"
  ],
  transform: {
    "^.+\\.(ts)$": "ts-jest",
    "^.+\\.svelte$": ["svelte-jester", { 
      "debug": true,
      "compilerOptions": { "css": false },
      "showConsoleLogs": true,
     }],
  },
  moduleFileExtensions: [
    "js",
    "ts",
    "svelte"
  ],
  setupFilesAfterEnv: [
    "@testing-library/jest-dom/extend-expect",
    './jest.setup.js'
  ],
  testEnvironment: "jsdom",
  moduleNameMapper, 
};

tsconfig.json

{
  "compilerOptions":{
    "moduleResolution": "node",
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "paths": {
      "Activities/*": ["./src/components/activities/*"],
      "Home/*": ["./src/components/home/*"],
      "Icons/*": ["./src/components/icons/*"],
      "Meeting/*": ["./src/components/meeting/*"],

      "Components/*": ["./src/components/*"],
      "@/*": ["./src/*"]
    },
    "outDir": "dist",
    "types": ["svelte"]
  },
  "exclude": ["node_modules", "__sapper__", "build"]
}

[zeekrey]

Same probleme here. Here are our configs:

jest.config.js

/** @type {import('@jest/types').Config.InitialOptions} */
const config = {
  transform: {
    '^.+\\.svelte$': [
      'svelte-jester',
      {
        preprocess: true,
      },
    ],
    '^.+\\.[jt]s$': 'ts-jest',
    '^.+\\.svg$': 'jest-transform-stub',
    '^.+\\.webm$': 'jest-transform-stub',
  },
  testEnvironment: 'jsdom',
  testMatch: ['**/src/**/*.test.[tj]s'],
  testPathIgnorePatterns: ['/node_modules/'],
  moduleFileExtensions: ['js', 'ts', 'svelte'],
  moduleNameMapper: {
    'assets(.*)$': '<rootDir>/src/assets/$1',
    'components(.*)$': '<rootDir>/src/components/$1',
  },
  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
  // Use cobertura as coverage reporter (used by gitlab) if coverage should be collected
  coverageReporters: ['text', 'cobertura'],
  collectCoverageFrom: [
    'src/**/*.{ts,svelte}',
    '!src/App.svelte',
    '!src/main.ts',
    '!src/vite-env.d.ts',
  ],
};

export default config;

tsconfig.json

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "resolveJsonModule": true,
    "baseUrl": ".",
    /**
     * Typecheck JS in `.svelte` and `.js` files by default.
     * Disable checkJs if you'd like to use dynamic types in JS.
     * Note that setting allowJs false does not prevent the use
     * of JS in `.svelte` files.
     */
    "allowJs": true,
    "checkJs": false,
    "strictNullChecks": true
  },
  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
}

[sebastianrothe]

Can you move your export out of context=module ?

[zeekrey]

Would be possible for sure. But this is the actual use case. With this syntax it is possible to export anything other than the default from a svelte componenten file. Without the export, the whole thing would be useless.

[sebastianrothe]

Would be possible for sure. But this is the actual use case. With this syntax it is possible to export anything other than the default from a svelte componenten file. Without the export, the whole thing would be useless.

I meant, if it works, if you move the export into the other <script> tag?

[awmcclain]

If I understand you correctly, that won't actually help us, since exports from the other script tag are local to the instance of the component, and module-level exports are shared between instances.

We're already using the module-level exports in our codebase so it would be great to support this in jest, rather than coding a workaround just for the test.

Again, this is only an issue if the test is a typescript file.

[sebastianrothe]

I can have another shot at it in July.

[awmcclain]

Hey just wanted to ping about this again. No spec files written in typescript can import module-level exports from Svelte components.