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

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

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

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，对于大多数文件导入，我只需要路径。为了做到这一点，我编写了以下三个变压器...

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缓存-这让我很不舒服，我不得不运行jest --clearCache几次，否则将无法读取对转换器的更改。

Answer 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"
},

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

1 个答案: