运行 Jest测试时为什么img标签src属性为空？

Question

启动本地环境时图像成功呈现，但当我运行测试时，src 始终为空。

已经用 :src="require('...')" 试过了，但没用。

我错过了什么配置或其他东西？

这是我的相关配置、文件和版本：

//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")
})

Answer 1

我想通了：

问题在于 jest-transform-stub，因为它只是向 src 属性添加了一个空字符串。

解决方案来自https://jestjs.io/docs:

使用以下代码创建一个 fileTransformer.js 文件：

//fileTransformer.js

const path = require('path');

module.exports = {
  process(src, filename, _config, _options) {
    return `module.exports = ${JSON.stringify(path.basename(filename))};`;
  },
};

并用它修改 Jest 配置：

//jest.config.js

...
  transform: {
    //other configs you have
    ".+\.(css|styl|less|sass|scss|svg|png|jpg|jpeg|ttf|woff|woff2)$": "<rootDir>/path_to_file/fileTransformer.js",
  },
...

之后，预期的 .toBe 值将是：foo.jpg

运行 Jest测试时为什么img标签src属性为空？

Why img tag src attribute is empty when run Jest test?

vue.js

jestjs

vuejs3

vue-test-utils