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

【问题标题】：Vue.JS / JEST - Unable to Mock Asset ReferenceVue.JS / JEST - 无法模拟资产参考
【发布时间】：2020-04-03 00:04:58
【问题描述】：

我正在尝试设置一个组件，其中包含指向 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)) + ';'
    },
}

（文件-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/**"
    ]
  }

我在这里没有取得任何进展，我的谷歌搜索不断返回各种不同的网站，这些网站转载了我已经链接到的完全相同的文章。我一定错过了什么，但我看不到什么！

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

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 Cache - 这让我很受打击，我不得不运行 jest --clearCache 几次，否则无法读取对转换器的更改。

【问题讨论】：

是import关键字的错误吗？ jest 的运行情况如何？
我猜您可能需要重新排序您的 moduleNameMapper 数组，最后将 "^@/(.*)$": "<rootDir>/src/$1", 放置
@tony19 - 导入图像时，导入语句中出现错误。我正在通过 vue-cli npm 脚本运行 jest。
@Teneff - 这个建议就是答案 - 我觉得这是一个“我在这里没有看到什么”的问题......请你重新添加这个作为答案，我会给你功劳。
@KeithJackson 支持我的评论，我想要一顶开玩笑的帽子：P

标签： javascript vue.js mocking jestjs vue-cli-3

【解决方案1】：

在当前配置下，资产将由第一个正则表达式匹配，"<rootDir>/src/$1" 将被使用，而不是所需的 <rootDir>/__mocks__/file-mock.js

一种解决方案是重新排序moduleNameMapper，如下所示

"moduleNameMapper": {
  "\\.(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",
  "^@/(.*)$": "<rootDir>/src/$1"
},

【讨论】：