typescript - Kan ikke finne modulen './SLink.svelte' eller dens tilsvarende typedeklarasjoner

Jeg prøver å konfigurere Jest med Svelte og TypeScript i et eksisterende prosjekt.

Jeg har satt opp alt i henhold til denne artikkelen (med bruk av Babel og ts-jest).

Når jeg kjører testen får jeg dette:

FAIL src/tests/methods.test.ts
  ● Test suite failed to run

    src/router/components/index.ts:1:19 - error TS2307: Cannot find module './SLink.svelte' or its corresponding type declarations.

    1 import SLink from './SLink.svelte';
                        ~~~~~~~~~~~~~~~~

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        2.705 s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

Jeg har andre komponenter som importeres som ikke gir denne feilen, den eneste forskjellen er at SLink importeres i en vanlig .ts-fil, mens mine andre komponenter importeres i andre komponenter (med unntak av App.svelte).

Hvis jeg endrer eksporten til en tom streng, går den gjennom testen som den skal (selv om den fortsatt kaster en feil om at denne komponenten ikke kan rendres).

Dette SO-innlegget foreslår å legge til @tsconfig/svelte, noe jeg allerede har gjort.

Hvis jeg legger til // @ts-ignore over importen, fungerer det akkurat som det skal, men finnes det en annen måte å løse dette på?

Relevant kode:

src/tests/methods.test.ts:

import { render } from '@testing-library/svelte';
import App from '../App.svelte';

test('should render', () => {
    const results = render(App);

    expect(() => results.getByText('Hello world!')).not.toThrow();
});

src/router/components/index.ts:

import SLink from './SLink.svelte';

export { SLink };

SLink er en vanlig Svelte-komponent som ikke bruker TypeScript.

jest.config.js:

module.exports = {
    preset: 'ts-jest',
    clearMocks: true,
    coverageDirectory: 'coverage',
    transform: {
        '^.+\\.svelte$': [
            'svelte-jester',
            {
                preprocess: true,
            },
        ],
        '^.+\\.ts$': 'ts-jest',
        '^.+\\.js$': 'babel-jest',
    },
    moduleFileExtensions: ['js', 'ts', 'svelte'],
};

babel.config.js:

module.exports = {
    presets: [
        ['@babel/preset-env', { targets: { node: 'current' } }],
        '@babel/preset-typescript',
    ],
};

svelte.config.js:

import sveltePreprocess from 'svelte-preprocess';

module.exports = {
    preprocess: sveltePreprocess(),
};

Filtre:

src
|_ tests
  |_ methods.test.ts
|_ router
  |_ components
    |_ index.ts
    |_ SLink.svelte

Svar #1

Jeg opplevde en lignende feil, og takket være dette svaret på et annet spørsmål, innså jeg at jeg ved et uhell hadde sluttet å referere til Svelte-typene på grunn av en overstyring i tsconfig.json-filen min.

Min tsconfig utvidet Svelte-standardene, men jeg hadde lagt til compilerOptions-overstyringen nedenfor:

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  // ...
  "compilerOptions": {
    "types": ["node", "jest"]
  }
}

Når jeg bygde prosjektet mitt, fikk jeg denne feilen (på samme måte, angående en import av en Svelte-komponent i en .ts-fil):

(!) Plugin typescript: @rollup/plugin-typescript TS2307: Cannot find module './App.svelte' or its corresponding type declarations.

Det ser ut til at jeg tilfeldigvis overskrev noen av Svelte-standardinnstillingene. I henhold til forslaget som er koblet til ovenfor, endret jeg tsconfig-en min på denne måten (la til "svelte" i types-arrayen):

{
  // ...
  "compilerOptions": {
    "types": ["node", "svelte", "jest"]
  }
}

I mitt tilfelle løste dette feilen.

Relaterte artikler