typescript - Nu se poate găsi modulul './SLink.svelte' sau declarațiile sale de tip corespunzătoare

Încerc să configurez Jest cu Svelte și TypeScript într-un proiect existent.

Am configurat totul conform acestui articol (folosind Babel și ts-jest).

Când rulez testul, primesc asta:

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.

Am alte componente importate care nu dau această eroare, singura diferență fiind că SLink este importat într-un fișier obișnuit .ts, în timp ce celelalte componente ale mele sunt importate în alte componente (cu excepția App.svelte).

Dacă schimb exportul cu un șir gol, trece testul așa cum ar trebui (deși, tot generează o eroare că acest component nu poate fi redat).

Această postare de pe SO sugerează adăugarea @tsconfig/svelte, lucru pe care l-am făcut deja.

Dacă adaug // @ts-ignore deasupra importului, funcționează exact așa cum ar trebui, dar, există o altă cale de a evita asta?

Cod relevant:

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 este un component obișnuit Svelte care nu folosește 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(),
};

Structura fișierelor:

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

Răspuns #1

Am văzut o eroare similară, și datorită acestui răspuns la o întrebare diferită, am realizat că am încetat din greșeală să mai fac referire la tipurile Svelte din cauza unei suprascrieri în fișierul meu tsconfig.json.

Fișierul meu tsconfig a extins setările implicite Svelte, dar am adăugat suprascrierea compilerOptions de mai jos:

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

La construirea proiectului meu, primeam această eroare (în mod similar, referitor la un import al unui component Svelte într-un fișier .ts):

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

Se pare că am suprascris accidental unele dintre setările implicite ale Svelte. Conform sugestiei menționate mai sus, am modificat tsconfig-ul meu astfel (adăugând "svelte" la array-ul de tipuri):

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

În cazul meu, aceasta a rezolvat eroarea.