CODEWITHSUNDEEP
typescriptjestjssvelte
Dan Knights
Dan Knights

Reputation: 8378

Cannot find module './SLink.svelte' or its corresponding type declarations

I'm trying to configure Jest with Svelte and TypeScript in an existing project.

I've setup everything as per this article (using Babel and ts-jest).

When I run the test I get this:

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.

I have other components being imported that don't throw this error, the only difference being that SLink is imported into a regular .ts file while my other components are imported into other components (with the exception of App.svelte).

If I change the export to an empty string, it goes through the test as it should (though, it still throws an error that this component can't be rendered).

This SO post suggests adding @tsconfig/svelte, which I've already done.

If I add // @ts-ignore above the import, it works exactly as it should, but, is there another way around this?

Relevant code:

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 is an ordinary Svelte component that doesn't use 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(),
};

File tree:

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

Upvotes: 4

Views: 2688

Answers (1)

John B
John B

Reputation: 146

I was seeing a similar error, and thanks to this answer to a different question, I realized I had accidentally stopped referencing the Svelte types due to an override in my tsconfig.json file.

My tsconfig extended the Svelte defaults, but I had added the compilerOptions override below:

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

On building my project, I was getting this error (similarly, regarding an import of a Svelte component in a .ts file):

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

It seems that I was accidentally overriding some of the Svelte defaults. Per the suggestion linked to above, I amended my tsconfig like so (adding "svelte" to the types array):

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

In my case, this fixed the error.

Upvotes: 12

Related Questions