Existe-t-il un moyen d'utiliser des alias dans les modèles et scripts Vue pour mapper la configuration de vue-jest ?

Question

Dépendances : "@vue/cli-plugin-unit-jest" : "^4.5.13", "@vue/test-utils" : "^1.2.1", "vue - plaisanterie" : "^3.0.7"&Lt ;/p> ;

J'ai une application qui définit un alias (disons "foo") dans vue.config.js :

module.exports = {
  chainWebpack : (config) =>
    //Définit le nom du projet comme alias
    config.resolve.alias.set('foo', __dirname);
  },
};</pré>
<p>Pour les instructions d'importation et les attributs src des balises HTML...</p>
<p>Dans main.js :</p>
<pre class="brush:php;toolbar:false;">...
importer l'application depuis 'foo/src/components/core/App' ;
...</pré>
<p>Dans ../src/core/App/index.vue:</p>
<pre class="lang-html Prettyprint-override"><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>

Je sais que je peux utiliser moduleNameMapper dans jest.config.js, quelque chose comme :

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

Cependant, cela ne mappe pas les alias qui apparaissent dans l'attribut src d'une balise HTML. Existe-t-il un moyen pour que vue-jest interprète ces chemins de propriété via les paramètres de configuration ou d'autres moyens ?

Tout conseil est grandement apprécié.

Answer 1

Analyse d'URL dans SFC

Utilisation de chemins relatifs sans alias dans

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

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

Analyse d'URL dans le contenu du modèle

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

Même avec l'analyse d'URL activée, Vue CLI configure jest sur Renvoie une chaîne vide pour obtenir les médias de require, y compris les images jest以返回空字符串以获取require的媒体，包括图像。如果您的测试需要与正常解析的URL一起在生产环境中工作，您将需要一个模仿url-loader. Si vos tests doivent fonctionner en production avec des URL normalement résolues, vous aurez besoin d'un convertisseur Jest simulé pour < code>url-loader. Le chargeur de configuration Vue CLI renvoie le nom de fichier analysé s'il est supérieur à 4 Ko ; sinon, il renvoie l'URL des données base64.

Pour activer l'analyse d'URL :

Mise à niveau vers
1. 4 :

   npm i -D vue-jest@4
   

   vue-jest

Créez le fichier suivant pour votre personnalisation
2. qui sera utilisé plus tard ci-dessous :

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

Pour éviter d'écraser accidentellement les préréglages Jest par défaut de Vue CLI, utilisez un outil de fusion (tel que
3. lodash.merge

   ) pour insérer une configuration personnalisée dans jest.config.js . lodash.merge）在jest.config.js

Ajoutez une
4. configuration dans

   Jest global et définissez templateCompiler.transformAssetUrls. vue-jest配置，设置templateCompiler.transformAssetUrls

Modifiez l'attribut transform du préréglage de fusion et utilisez notre
5. convertisseur pour traiter l'image. Cela nécessite de supprimer les autres convertisseurs d'images du préréglage Jest par défaut pour éviter les conflits.

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

Démo GitHub