是否有一种方法可以在Vue模板和脚本中使用别名来映射vue-jest配置?
P粉476547076
P粉476547076 2023-08-26 17:10:07
[Vue.js讨论组]
<p>依赖项: &quot;@vue/cli-plugin-unit-jest&quot;: &quot;^4.5.13&quot;, &quot;@vue/test-utils&quot;: &quot;^1.2.1&quot;, &quot;vue-jest&quot;: &quot;^3.0.7&quot;</p> <p>我有一个应用程序,在vue.config.js中设置了一个别名(比如说&quot;foo&quot;):</p> <pre class="brush:php;toolbar:false;">module.exports = { chainWebpack: (config) =&gt; { // 将项目名称设置为别名 config.resolve.alias.set('foo', __dirname); }, };</pre> <p>对于导入语句和HTML标签的src属性...</p> <p>在main.js中:</p> <pre class="brush:php;toolbar:false;">... import App from 'foo/src/components/core/App'; ...</pre> <p>在../src/core/App/index.vue中:</p> <pre class="lang-html prettyprint-override"><code>&lt;script src=&quot;foo/src/components/core/App/script.js&quot; /&gt; &lt;style module src=&quot;foo/src/components/core/App/style.css&quot; /&gt; &lt;template src=&quot;foo/src/components/core/App/template.html&quot; /&gt; </code></pre> <p>我知道我可以在jest.config.js中使用moduleNameMapper,类似于:</p> <p><code>'^foo(.*)$': '<rootDir>$1',</code></p> <p>然而,这不会映射出现在HTML标签的src属性中的别名。有没有办法通过配置设置或其他方式让vue-jest解释这些属性路径呢?</p> <p>非常感谢任何建议。</p>
P粉476547076
P粉476547076

全部回复(1)
P粉256487077

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>/$1',
      },
    })
    
    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演示

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号