无法找到模块'./SLink.svelte‘或其相应的类型声明

Question

我试图在现有项目中使用Svelte和TypeScript配置Jest。

我已经按照这篇文章设置了一切(使用Babel和T-玩笑)。

当我运行测试时，我得到了这样的信息：

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.

我还导入了其他不抛出此错误的组件，唯一的区别是将SLink导入到常规.ts文件中，而将其他组件导入其他组件(App.svelte除外)。

如果我将导出更改为空字符串，它将按应有的方式通过测试(不过，它仍然抛出一个无法呈现该组件的错误)。

这是如此的帖子建议添加@tsconfig/svelte，我已经做过了。

如果我在导入之后添加了// @ts-ignore，它的工作原理就完全一样了，但是，还有其他方法吗？

相关守则：

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是不使用TypeScript的普通Svelte组件。

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(),
};

文件树：

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

Answer 1

我看到了一个类似的错误，由于这个答案有了一个不同的问题，我意识到我意外地停止了引用Svelte类型，因为我的tsconfig.json文件中有一个覆盖。

我的tsconfig扩展了Svelte默认值，但我在下面添加了compilerOptions覆盖：

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

在构建我的项目时，我得到了这个错误(类似地，关于.ts文件中Svelte组件的导入)：

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

似乎我不小心忽略了Svelte的一些默认设置。根据与上述链接的建议，我修改了tsconfig (将"svelte"添加到类型数组)：

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

在我的例子中，这个修正了错误。