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'
| ^