Why does Jest throw an error when importing components from Vuetify inside node_modules folder

59 Views Asked by At

I decided to test my vue 3 project, in which I use vuetify components

How do I correctly test my components in which I use vuetify components? When importing a component directly into the test, Just swears at the import error from the node_modules folder

My test file:

import { render } from '@testing-library/vue'
import VAlertCustom from '@/components/ui/alert/VAlertCustom.vue'
import { VAlert } from 'vuetify/lib/components/VAlert/VAlert.mjs'

describe('Alert', () => {
test('should render title, icon, and text', () => {
  const valuesAlert = {
    type: 'warn',
    text: 'Something is wrong'
  }

const { getByTestId } = render(VAlertCustom, {
  global: {
    components: {
      VCustomIcon: {
        template: '<div data-testid="v-custom-icon" />'
      },
      VAlert
    }
  },
  data() {
    return {
      isShow: true,
      valuesAlert
    }
  }
})

const title = getByTestId('alert-title')
const icon = getByTestId('v-custom-icon')
const text = getByTestId('alert-text')

expect(title).toHaveTextContent('Внимание!')
expect(icon).toBeInTheDocument()
expect(text).toHaveTextContent('Something is wrong')

}) })

My jest.config.js

module.exports = {
  moduleFileExtensions: ['js', 'json', 'vue', 'mjs'],
  testEnvironment: 'jsdom',
  testEnvironmentOptions: {
    customExportConditions: ['node', 'node-addons']
  },
  moduleNameMapper: {
    '^@root(.*)$': '<rootDir>/src$1',
    '^@components(.*)$': '<rootDir>/src/components$1'
  },
  moduleDirectories: ['node_modules', 'src'],
  transform: {
    '^.+\\.js$': 'babel-jest',
    '^.+\\.vue$': '@vue/vue3-jest'
  },
  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect']
}

babel.config.js

module.exports = {
  presets: [['@babel/preset-env']],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./'],
        alias: {
          '@': './src'
        }
      }
    ]
  ]
}

I don't use typescript in my project

Log errors

frontend\node_modules\vuetify\lib\components\VAlert\VAlert.mjs:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { createVNode as _createVNode } from "vue";
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | import { render } from '@testing-library/vue'
      2 | import VAlertCustom from '@/components/ui/alert/VAlertCustom.vue'
    > 3 | import { VAlert } from 'vuetify/lib/components/VAlert/VAlert.mjs'
        | ^

0

There are 0 best solutions below