I am migrating my project to Vue3. I am getting the following error when I try to run unit tests with yarn jest
Test suite failed to run
Cannot find module 'vuetify/components' from 'src/plugins/vuetify.js'
Require stack:
src/plugins/vuetify.js
tests/unit/setup.js
1 | import { createVuetify } from 'vuetify';
> 2 | import * as components from 'vuetify/components';
| ^
3 | import * as directives from 'vuetify/directives';
4 | import { VStepperVertical, VStepperVerticalItem } from 'vuetify/labs/VStepperVertical'
5 | import { VTreeview } from 'vuetify/labs/VTreeview'
at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:324:11)
at Object.<anonymous> (src/plugins/vuetify.js:2:1)
at Object.<anonymous> (tests/unit/setup.js:7:1)
Here are test setup and config files
jest.config.js
//See https://jestjs.io/docs/configuration for details of each option
module.exports = {
preset: '@vue/cli-plugin-unit-jest',
globals: {},
testEnvironment: 'jsdom',
transform: {
"^.+\\.vue$": "@vue/vue3-jest",
'^.+\\.m?[j|t]sx?$': 'babel-jest'
},
transformIgnorePatterns: ['node_modules/(?!vue-router|@babel|vuetify)'],
coverageDirectory: "tests/coverage",
collectCoverageFrom: [
"**/src/**/*.{js,vue}",
"!**/node_modules/**",
"!src/main.js"
],
reporters: [ "default", "jest-junit" ],
setupFilesAfterEnv: ["./tests/unit/setup.js"]
}
babel.config.js
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
['@babel/preset-env',
{
targets: {
node: 'current'
},
}
]
]
}
tests/unit/setup.js
/**
* This file is executed once before every test.
* We include here basic setup and shared mocks
*/
import { config as vueConfig } from '@vue/test-utils';
import vuetify from '@/plugins/vuetify';
vueConfig.global.plugins.push(vuetify);
//Workaround to avoid missing data-app warnings
//https://github.com/vuetifyjs/vuetify/issues/1210#issuecomment-319624495
var app = document.createElement('div');
app.setAttribute('data-app', true);
document.body.appendChild(app);
//Mocking VuePapaParse since it has an import outside a module, not allowed by jest.
/* eslint-disable no-undef */
jest.mock("vue-papa-parse", () => {
return jest.fn();
});
/* eslint-enable no-undef */
//Mocking navigator and its properties and functions as Jest runs in JSDom and some functions are not implemented
Object.defineProperty(navigator, 'clipboard', {
value: {
writeText: () => {
return new Promise((resolve) => {
resolve('resolve');
});
},
},
});
src/plugins/vuetify.js
import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';
import { VStepperVertical, VStepperVerticalItem } from 'vuetify/labs/VStepperVertical'
import { VTreeview } from 'vuetify/labs/VTreeview'
import { VDateInput } from 'vuetify/labs/VDateInput'
import 'vuetify/styles';
const vuetify = createVuetify({
components: {
...components,
VStepperVertical,
VStepperVerticalItem,
VTreeview,
VDateInput
},
directives,
theme: {
themes: {
light: {
bookingBlue: '#003580'
},
},
},
});
export default vuetify;
My app works fine. I did fix everything related to vue3 migration. Now I want to focus on unit tests. However, I am unable to run. I tried all the suggestions but couldn't make it work. What is missing here?
I fixed the issue by adding this to jest.config.js
moduleNameMapper: {
'^vuetify/components$': '<rootDir>/node_modules/vuetify/lib/components/index.mjs',
'^vuetify/directives$': '<rootDir>/node_modules/vuetify/lib/directives/index.mjs',
'^vuetify/labs/VStepperVertical$': '<rootDir>/node_modules/vuetify/lib/labs/VStepperVertical/index.mjs',
'^vuetify/labs/VTreeview$': '<rootDir>/node_modules/vuetify/lib/labs/VTreeview/index.mjs',
'^vuetify/labs/VDateInput$': '<rootDir>/node_modules/vuetify/lib/labs/VDateInput/index.mjs',
'^vuetify/styles$': '<rootDir>/node_modules/vuetify/lib/styles/main.sass',
},