New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Transforming Vue 3 components for unit testing with Jest #35
Comments
Thanks for this guide! |
This doesn't work if you want to test that the icon is rendered: import EditIcon from '@/assets/icons/edit.svg'
// ...
expect(wrapper.findComponent(EditIcon).exists()).toBeTruthy() // doesn't work But if instead of setting up the jest.mock('@/assets/icons/edit.svg', () => ({ el: '<svg />' }))
import EditIcon from '@/assets/icons/edit.svg'
// ...
expect(wrapper.findComponent(EditIcon).exists()).toBeTruthy() // works |
Nevermind my previous comment, it also doesn't seem to work properly in some cases.
module.exports = {
process(sourceText, sourcePath) {
const mockComponent = {
name: sourcePath,
template: sourceText
}
return {
code: `module.exports = ${JSON.stringify(mockComponent)};`
}
}
}
module.exports = {
// ...
transform: {
'^.+\\.vue$': '@vue/vue3-jest',
// remove 'svg' from here:
'.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2|mp3)$':
'jest-transform-stub',
'^.+\\.(js|jsx)?$': 'babel-jest',
// specific transformer for svg:
'.+\\.svg$': '<rootDir>/tests/jest-svg-component-transformer.js'
}
} |
If you need to transform Vue 3 components created using Vite SVG Loader for the purpose of Jest unit testing:
tests
directory.You could alternatively use
jest-transform-stub
, but it may log warnings to the console. Plus this way the rendered HTML includes an<svg>
tag.jest.config.js
to transform SVG components into the mock component:I've included my entire
jest.config.js
file for reference, but the key part is here:Now all components created using Vite SVG Loader will be automatically transformed to the mock component.
The text was updated successfully, but these errors were encountered: