typescript - 找不到模块 './SLink.svelte' 或其对应的类型声明

标签 typescript jestjs svelte

我正在尝试在现有项目中使用 Svelte 和 TypeScript 配置 Jest。
我已经按照 this article 设置了所有内容(使用 Babel 和 ts-jest )。
当我运行测试时,我得到了这个:

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 除外)。
如果我将导出更改为空字符串,它会按原样通过测试(尽管如此,它仍然会抛出无法呈现该组件的错误)。
This SO post建议添加 @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是一个普通的 Svelte 组件,没有 使用 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(),
};
文件树:
src
|_ tests
  |_ methods.test.ts
|_ router
  |_ components
    |_ index.ts
    |_ SLink.svelte

最佳答案

我看到了类似的错误,感谢 this answer对于另一个问题,我意识到由于 tsconfig.json 文件中的覆盖,我意外地停止了引用 Svelte 类型。
我的 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" 添加到 types 数组):
{
  // ...
  "compilerOptions": {
    "types": ["node", "svelte", "jest"]
  }
}
就我而言,这修复了错误。

关于typescript - 找不到模块 './SLink.svelte' 或其对应的类型声明,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65162885/

相关文章:

javascript - text() 方法在 Blob 中不可用

testing - 如何在 Jest 中断言函数调用顺序

svelte - 如何将 Svelte 存储与树状嵌套对象一起使用?

javascript - 嵌套组件更新时,Svelte 商店不会触发 onchange

javascript - 外部依赖项在 Nav.svelte 中不起作用

Angular 5 - react 形式

typescript - 在 typescript 和 webpack 项目中使用外部库

generics - 使用 TypeScript 和 EventEmitter 的类型化事件

node.js - 将后端部署到 azure 时遇到问题

javascript - 如何在 vue.js 单元测试中模拟 window.google