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

Question

我正在尝试设置一个引用 link 3 项资产的组件。这打破了我所有的测试如下...

Test suite failed to run

SyntaxError: Invalid or unexpected token.

以下 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 配置如下...

  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transform": {
      ".*\.(vue)$": "vue-jest",
      "^.+\.js$": "<rootDir>/node_modules/babel-jest"
    },
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/",
      "\.(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/**"
    ]
  }

我在这里没有取得任何进展，我的谷歌搜索一直 return 各种不同的网站转载与我已经 link 完全相同的文章。我一定是遗漏了什么，但我看不到什么！

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

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

我没有使用 moduleNameMapper，而是使用 transform（我还试图将这两者结合起来，这在我原来的 post 中不起作用）。 transform 选项允许我从导入中 return 有用的东西。对于 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)) + ';'
    },
}

这为我的测试提供了不同的 return 文件名路径类型。

在任何地方都不需要 jest.mock 调用。

PS：当心 Jest Cache - 这让我很受打击，我不得不运行 jest --clearCache 几次，否则会更改未读取变压器。

Answer 1

使用当前配置，资产将由第一个正则表达式匹配，并且将使用 "<rootDir>/src/" 而不是所需的 <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/"
},

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

Vue.JS / JEST - Unable to Mock Asset Reference

javascript

mocking

vue.js

jestjs

vue-cli-3