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); }, }; Pour les instructions d'importation et les attributs src des balises HTML...
Dans main.js :
... importer l'application depuis 'foo/src/components/core/App' ; ... Dans ../src/core/App/index.vue:
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é.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Analyse d'URL dans SFC
Utilisation de chemins relatifs sans alias dansvue-jest无法解析SFC中顶级块标签的srcURL，因此您需要在src/components/core/App/index.vue:Analyse d'URL dans le contenu du modèle
vue-jest使用@vue/component-compiler-utils编译模板，但URL解析需要transformAssetUrls选项。vue-jest3.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
Pour activer l'analyse d'URL :jestsurRenvoie une chaîne vide pour obtenir les médias derequire, y compris les imagesjest以返回空字符串以获取require的媒体，包括图像。如果您的测试需要与正常解析的URL一起在生产环境中工作，您将需要一个模仿url-loader. Si vos tests doivent fonctionner en production avec des URL normalement résolues, vous aurez besoin d'unconvertisseur Jest simulé pour 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.Mise à niveau vers- 4 :
Créez le fichier suivant pour votre personnalisation
- qui sera utilisé plus tard ci-dessous :
Pour éviter d'écraser accidentellement les préréglages Jest par défaut de Vue CLI, utilisez un outil de fusion (tel que
- configuration dans
Modifiez l'attribut
- 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.
Démo GitHubvue-jestmy-jest-url-loaderlodash.merge) pour insérer une configuration personnalisée dans
jest.config.js.lodash.merge）在jest.config.jsJest globalet définissez
templateCompiler.transformAssetUrls code >.vue-jest配置，设置templateCompiler.transformAssetUrlstransformdu préréglage de fusion et utilisez notre// 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/(.*)$': '/', }, }) 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('|')})$`]: '/tests/my-jest-url-loader', } } useUrlLoaderForImages(newJestPreset) module.exports = newJestPreset transform属性，使用我们的my-jest-url-loader