Adakah terdapat cara untuk menggunakan alias dalam templat dan skrip Vue untuk memetakan konfigurasi vue-jest?

Question

Pergantungan: "@vue/cli-plugin-unit-jest": "^4.5.13", "@vue/test-utils": "^1.2.1", "vue - gurauan": "^3.0.7"

Saya mempunyai aplikasi yang menetapkan alias (sebut "foo") dalam vue.config.js:

module.exports = {
  chainWebpack: (config) =>
    //Tetapkan nama projek sebagai alias
    config.resolve.alias.set('foo', __dirname);
  },
};

Untuk penyataan import dan atribut src tag HTML...

Dalam main.js:

...
import Apl daripada 'foo/src/components/core/App';
...</pra>
<p>Dalam ../src/core/App/index.vue:</p>
<pre class="lang-html prettyprint-override"><code><script src="foo/src/components/core/App/script.js"
<modul gaya src="foo/src/components/core/App/style.css"
<template src="foo/src/components/core/App/template.html"
</code>

Saya tahu saya boleh menggunakan moduleNameMapper dalam jest.config.js, sesuatu seperti:

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

Walau bagaimanapun, ini tidak memetakan alias yang muncul dalam atribut src teg HTML. Adakah terdapat cara untuk membolehkan vue-jest mentafsir laluan sifat ini melalui tetapan konfigurasi atau cara lain?

Sebarang nasihat amat dihargai.

Answer 1

Penghuraian URL dalam SFC

Menggunakan laluan relatif tanpa nama dalam

vue-jest无法解析SFC中顶级块标签的src URL，因此您需要在src/components/core/App/index.vue:

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

Penghuraian URL dalam kandungan templat

vue-jest使用@vue/component-compiler-utils编译模板，但URL解析需要transformAssetUrls选项。 vue-jest 3.x不支持向@vue/component-compiler-utils传递选项，但在4.0.0-rc.1中通过templateCompiler.transformAssetUrlsKonfigurasipelaksanaan.

Walaupun penghuraian URL didayakan, Vue CLI mengkonfigurasi jest kepada Mengembalikan rentetan kosong untuk mendapatkan media require, termasuk imej jest以返回空字符串以获取require的媒体，包括图像。如果您的测试需要与正常解析的URL一起在生产环境中工作，您将需要一个模仿url-loader. Jika ujian anda perlu berfungsi dalam pengeluaran dengan URL yang biasanya diselesaikan, anda memerlukan jest converter untuk pemuat url. Pemuat konfigurasi Vue CLI mengembalikan nama fail yang dihuraikan jika lebih besar daripada 4KB sebaliknya mengembalikan URL data base64.

Untuk mendayakan penghuraian URL:

Naik taraf kepada
1. 4:

   npm i -D vue-jest@4
   

   vue-jest
Buat fail berikut untuk tersuai anda
2. yang akan digunakan kemudian di bawah:

   // <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 = ')
     }
   }
   

   my-jest-url-loader
Untuk mengelak menimpa pratetap Jest lalai Vue CLI secara tidak sengaja, gunakan alat cantum (seperti
3. lodash.merge

   ) untuk memasukkan konfigurasi tersuai dalam jest.config.js . lodash.merge）在jest.config.js

Tambahkan konfigurasi
4. dalam

   Jest global dan tetapkan templateCompiler.transformAssetUrls code >. vue-jest配置，设置templateCompiler.transformAssetUrls

Ubah suai atribut transform pratetap gabungan dan gunakan penukar
5. kami untuk memproses imej. Ini memerlukan mengalih keluar penukar imej lain daripada pratetap Jest lalai untuk mengelakkan konflik.

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

   transform属性，使用我们的my-jest-url-loader

GitHub Demo