I am currently attempting to run unit tests in my Vue3 project using vue/test-utils and jest.
Upon running the npm run test script, the test fails due to an error with the import:
error TS2307: Cannot find module 'pathtofile/file.vue'I have tried adding a shims-vue.d.ts file 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 specific tests that are failing:
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 am unsure why this error is happening.
Could this be related to Vue script setup? Or is it something else?