vuejs2jestjsvuejs3babel-jestvuetifyjs3

Can't run unit tests after migrating to vue3


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?


Solution

  • 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',
      },