Vue 3 with script setup + typescript gives error 2307 Cannot find module

Viewed 375

I'm a trying to do some unit testsing in my vue3 project with vue/test-utils and jest.

After launching the npm run test script, the test stops and fails because of an error on the import: error TS2307: Cannot find module 'pathtofile/file.vue'

I've tried to add a shims-vue.d.ts in my src folder with

define module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<Record<string,unknown>, Record<string,unknown>, unknown>
  export default component
}

The project is built with Vitejs. Here's the tsconfig:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "react": ["./stub/types__react"]
    },
    "skipLibCheck": true
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ],
  "exclude": [
    "node_modules",
    "node_modules/@vueuse/core/node_modules/@vueuse/shared/index.d.ts"
  ]
}

and the jest.congif.js:

module.exports = {
  testEnvironment: 'jsdom',
  collectCoverage: true,
  collectCoverageFrom: ['src/**/*.{[tj]s?(x),vue}'],
  coverageDirectory: 'tmp/coverage',
  coveragePathIgnorePatterns: [
    '/node_modules/',
    '/src/main.ts',
    '/src/assets/*',
    '/src/components/*',
    '/src/connector/*',
    '/src/enums/*',
    '/src/graphql/*',
    '/src/libs/*',
    '/src/router/*',
    '/src/store/*',
    '/src/types/*',
    '/src/utils/*',
    '/src/views/*'
  ],
  coverageReporters: ['html', 'text', 'lcov'],
  coverageThreshold: {
    global: {
      branches: 50,
      functions: 50,
      lines: 50,
      statements: 50
    }
  },

  moduleFileExtensions: ['js', 'ts', 'json', 'vue'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  transform: {
    '^.+\\.ts$': 'ts-jest',
    '^.+\\.vue$': '@vue/vue3-jest'
  }
};

the tests that fails:

import { config, mount } from '@vue/test-utils';
import { createI18n, I18n, I18nOptions } from 'vue-i18n';
import { createPinia, setActivePinia } from 'pinia';
import { createTestingPinia } from '@pinia/testing';
import ElementPlus from 'element-plus';
import dayjs from 'dayjs';

import MaterialIcon from '@/components/common/material-icon/material-icon.vue'; <--- error
import QuickFilter from '@/components/common/quick-filter/quick-filter.vue'; <--- error

import localizedFormat from 'dayjs/plugin/localizedFormat';
import timezone from 'dayjs/plugin/timezone';
import duration from 'dayjs/plugin/duration';
import advancedFormat from 'dayjs/plugin/advancedFormat';

dayjs.extend(localizedFormat);
dayjs.extend(timezone);
dayjs.extend(advancedFormat);
dayjs.extend(duration);

beforeEach(() => {
  // creates a fresh pinia and make it active so it's automatically picked
  // up by any useStore() call without having to pass it to it:
  // `useStore(pinia)`
  setActivePinia(createPinia());
});

const i18n = createI18n({
  locale: 'en',
  fallbackLocale: 'en',
  globalInjection: true,
  messages: {
    en: {
      dates: {
        'yesterday': 'Yesterday',
        '7days': '7 Days',
        '30days': '30 Days'
      }
    }
  }
} as I18nOptions) as I18n;

config.global.mocks = {
  dayjs
};
config.global.components = {
  'MaterialIcon': MaterialIcon
};
config.global.plugins = [i18n, createTestingPinia(), ElementPlus];

describe('Quick filter', () => {
  it('renders the filters', () => {
    const wrapper = mount(QuickFilter);
    const filters = wrapper.findAll('.quick-filter__item');

    expect(filters.length).toBe(3);
  });
});

I don't really understand why this error occurs.

Is it an issue from Vue with script setup ? Is it something else ?

0 Answers
Related