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 < kod>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. 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