Vue.JS / JEST-无法模拟资产参考

Question

我正在尝试设置一个具有指向3个资产的参考链接的组件。这打破了我的所有测试，如下所示...

测试套件无法运行

SyntaxError：无效或意外的令牌。

突出显示以下4条参考线中的第二条（最后3条是图像）。>>

import SpecialistChooser from './specialist-chooser'

import imgCo2 from '@/assets/motivations/t-co2.jpg'
import imgFuelBill from '@/assets/motivations/fuel-bill.jpg'
import imgBoth from '@/assets/motivations/both.jpg'
我已在此处阅读了有关嘲弄资产的详细文章...https://jestjs.io/docs/en/webpack.html

但是这似乎没有任何问题。接下来，我为看起来像这样的文件设置了一个通用的模拟...

const path = require('path')

module.exports = {
    process(src, filename) {
        return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';'
    },
}
（（file-mock.js）

我的package.json中的笑话配置如下...

  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transform": {
      ".*\\.(vue)$": "vue-jest",
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
    },
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1",
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/file-mock.js",
      "\\.(css|less)$": "<rootDir>/__mocks__/style-mock.js"
    },
    "collectCoverage": false,
    "collectCoverageFrom": [
      "src/**/*.{js,vue}",
      "!**/node_modules/**",
      "!**/dist/**"
    ]
  }
我在这里没有取得任何进展，我的Google搜索不断返回各种不同的站点，它们重新印刷与我已经链接的同一篇文章。我必须丢失一些东西，但看不到！

我也尝试过手动模拟测试文件中的引用，就像这样...

jest.mock('@/assets/motivations/t-co2.jpg', () => {
    return '/app/img/t-co2.jpg'
})
jest.mock('@/assets/motivations/fuel-bill.jpg', () => {
    return '/app/img/fuel-bill.jpg'
})
jest.mock('@/assets/motivations/both.jpg', () => {
    return '/app/img/both.jpg'
})
这也不起作用。

更新：工作配置

解决了最初的问题后，由于下面的回答，我得以在此基础上构建一个可靠的有效实施方案，并认为可以与以后的搜索者分享。

我的package.json现在配置如下...

  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transform": {
      ".*\\.(vue)$": "vue-jest",
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      "\\.(jpg|jpeg|png|gif|webp|svg)$": "<rootDir>/img-test-transformer.js",
      "\\.(eot|otf|svg|ttf|woff|woff2)$": "<rootDir>/font-test-transformer.js",
      "\\.(mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/media-test-transformer.js"
    },
    "moduleNameMapper": {
      "\\.(css|less)$": "<rootDir>/__mocks__/style-mock.js",
      "^@/(.*)$": "<rootDir>/src/$1"
    }
[而不是使用moduleNameMapper，我使用的是transform（我也试图将在我的原始帖子中无法使用的两者结合起来）。 transform选项允许我从导入中返回有用的东西。对于Vue，对于大多数文件导入，我只需要路径。为了做到这一点，我写了3个如下的变压器...

const path = require('path')

module.exports = {
    process(src, filename) {
        return 'module.exports = ' + JSON.stringify('/app/img/' +path.basename(filename)) + ';'
    },
}

const path = require('path')

module.exports = {
    process(src, filename) {
        return 'module.exports = ' + JSON.stringify('/app/fonts/' + path.basename(filename)) + ';'
    },
}

const path = require('path')

module.exports = {
    process(src, filename) {
        return 'module.exports = ' + JSON.stringify('/app/media/' + path.basename(filename)) + ';'
    },
}
这为我提供了用于测试的不同返回文件名路径类型。 

也无需在任何地方进行jest.mock呼叫。

PS：当心玩笑的缓存

-这让我很不舒服，我不得不运行jest --clearCache几次，否则无法读取对转换器的更改。

我正在尝试设置一个具有指向3个资产的参考链接的组件。这将破坏我的所有测试，如下所示：测试套件无法运行SyntaxError：无效或意外的令牌。 ...

Answer 1

使用当前配置，资产将由第一个正则表达式匹配，并且将使用"<rootDir>/src/$1"代替所需的<rootDir>/__mocks__/file-mock.js