'Why img tag src attribute is empty when run Jest test?
The image successfully rendered when started the local env but when I run the test the src is always empty.
Already tried it with :src="require('...')" but it didn't help.
What config or other thing I miss?
Here are my related configs, files and versions:
//package.json
{
...
"scripts": {
"test": "jest"
},
"dependencies": {
"core-js": "^3.21.1",
"vue": "^3.2.31"
},
"devDependencies": {
"@babel/core": "^7.17.5",
"@vue/cli-plugin-babel": "~5.0.1",
"@vue/cli-service": "~5.0.1",
"@types/jest": "^27.4.1",
"@vue/test-utils": "^2.0.0-rc.18",
"@vue/vue3-jest": "^27.0.0-alpha.4",
"eslint-plugin-jest": "^26.1.1",
"jest": "^27.5.1",
"jest-transform-stub": "^2.0.0",
"webpack": "^5.69.1"
}
...
}
//jest.config.js
{
...
moduleNameMapper: {
"^@/(.*)$": "<rootDir>/src/"
},
transform: {
"^.+\\.js$": "babel-jest",
"^.+\\.vue$": "@vue/vue3-jest",
".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
},
}
//Image.Vue
<template>
<img src="@/assets/foo.jpg" alt="">
</template>
...
//image.test.js
...
import MyImg from '../src/components/MyImg.vue'
test('img src attribute is', () => {
const wrapper = shallowMount(MyImg)
expect(wrapper.find("img").attributes("src")).toBe("/img/foo.jpg")
})
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
