是否有一種方法可以在Vue模板和腳本中使用別名來映射vue-jest配置？

Question

依賴項: "@vue/cli-plugin-unit-jest": "^4.5.13", "@vue/test-utils": "^1.2.1", &quoquot;vue -jest": "^3.0.7"

我有一個應用程序，在vue.config.js中設定了一個別名（比如說"foo"）:

module.exports = {
  chainWebpack: (config) => {
    // 將項目名稱設定為別名
    config.resolve.alias.set('foo', __dirname);
  },
};

對於導入語句與HTML標籤的src屬性...

在main.js中:

...
import App from 'foo/src/components/core/App';
...

在../src/core/App/index.vue中:

<code><script src="foo/src/components/core/App/script.js" />
<style module src="foo/src/components/core/App/style.css" />
<template src="foo/src/components/core/App/template.html" />
</code>

我知道我可以在jest.config.js中使用moduleNameMapper，類似:

'^foo(.*)$': '$1',

然而，這不會對應出現在HTML標籤的src屬性中的別名。有沒有辦法透過配置設定或其他方式讓vue-jest解釋這些屬性路徑呢？

非常感謝任何建議。

Answer 1

SFC中的URL解析

vue-jest無法解析SFC中頂級區塊標籤的src URL，因此您需要在src/components/core/App/index.vue中使用未別名的相對路徑：

<script src="./script.js" />
<style module src="./style.css" />
<template src="./template.html" />

模板內容中的URL解析

vue-jest使用@vue/component-compiler-utils編譯模板，但URL解析需要transformAssetUrls#。 vue-jest 3.x不支援向@vue/component-compiler-utils傳遞選項，但在4.0.0-rc.1#中透過templateCompiler.transformAssetUrls配置實作。

即使啟用了URL解析，Vue CLI配置jest以傳回空字串以取得require的媒體，包括圖片。如果您的測試需要與正常解析的URL一起在生產環境中工作，您將需要一個模仿url-loader的Jest轉換器。 Vue CLI設定載入器以如果大於4KB，則傳回解析的檔案名稱; 否則傳回base64資料URL。

要啟用URL解析：

1. 升級到vue-jest 4：

   npm i -D vue-jest@4
   

2. 為自訂的my-jest-url-loader建立以下文件，稍後將在下面使用：

   // <rootDir>/tests/my-jest-url-loader.js
   const urlLoader = require('url-loader')
   
   module.exports = {
     process(src, filename) {
       const urlLoaderOptions = {
         esModule: false,
         limit: 4096,
         fallback: {
           loader: 'file-loader',
           options: {
             esModule: false,
             emitFile: false,
             name: filename,
           },
         },
       }
       const results = urlLoader.call({
         query: urlLoaderOptions,
         resourcePath: filename,
       }, src)
   
       // strip leading Webpack prefix from file path if it exists
       return results.replace(/^module.exports = __webpack_public_path__ \+ /, 'module.exports = ')
     }
   }
   

3. 為了避免意外覆寫Vue CLI的預設Jest預設，使用合併工具（例如lodash.merge）在jest.config.js中插入自訂配置。

4. 在Jest全域中新增一個vue-jest配置，設定templateCompiler.transformAssetUrls#。

5. 修改合併預設的transform屬性，使用我們的my-jest-url-loader轉換器來處理映像。這需要從預設Jest預設中刪除其他影像轉換器，以避免衝突。

   // jest.config.js
   const vueJestPreset = require('@vue/cli-plugin-unit-jest/presets/default/jest-preset')
   const merge = require('lodash.merge') 3️⃣
   
   const newJestPreset = merge(vueJestPreset, {
     globals: { 4️⃣
       'vue-jest': {
         templateCompiler: {
           transformAssetUrls: {
             video: ['src', 'poster'],
             source: 'src',
             img: 'src',
             image: ['xlink:href', 'href'],
             use: ['xlink:href', 'href']
           }
         }
       }
     },
     moduleNameMapper: {
       '^foo/(.*)$': '<rootDir>/',
     },
   })
   
   function useUrlLoaderForImages(preset) { 5️⃣
     const imageTypes = ['jpg', 'jpeg', 'png', 'svg', 'gif', 'webp']
     const imageTypesRegex = new RegExp(`(${imageTypes.join('|')})\|?`, 'ig')
   
     // remove the image types from the transforms
     Object.entries(preset.transform).filter(([key]) => {
       const regex = new RegExp(key)
       return imageTypes.some(ext => regex.test(`filename.${ext}`))
     }).forEach(([key, value]) => {
       delete preset.transform[key]
       const newKey = key.replace(imageTypesRegex, '')
       preset.transform[newKey] = value
     })
   
     preset.transform = {
       ...preset.transform,
       [`.+\.(${imageTypes.join('|')})$`]: '<rootDir>/tests/my-jest-url-loader',
     }
   }
   
   useUrlLoaderForImages(newJestPreset)
   
   module.exports = newJestPreset
   

GitHub示範

#