0

依赖：“@vue/cli-plugin-unit-jest”：“^4.5.13”，“@vue/test-utils”：“^1.2.1”，“vue-jest”：“^3.0.7”

我有一个使用在 vue.config.js 中设置的别名（比如“foo”）的应用程序：

module.exports = {
  chainWebpack: (config) => {
    // Add project name as alias
    config.resolve.alias.set('foo', __dirname);
  },
};

对于 import 语句和 HTML 标记 src...

在 main.js 中：

...
import App from 'foo/src/components/core/App';
...

在 ../src/core/App/index.vue 中：

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

我知道我可以在 jest.config.js 中使用 moduleNameMapper，例如：

'^foo(.*)$': '<rootDir>$1',

但是，这不会映射出现在我的 HTML 标记的 src 属性中的别名。有没有办法让 vue-jest 通过配置设置或其他方式解释这些属性路径？

任何建议将不胜感激。

4

1 回答 1

0

SFC 中的 URL 解析

vue-jest不解析srcSFC 中顶级块标签的 URL，因此您必须在以下位置使用无别名的相对路径src/components/core/App/index.vue：

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

<template>内容中的 URL 解析

vue-jest用于@vue/component-compiler-utils编译模板，但 URL 解析需要transformAssetUrls选项. vue-jest3.x 不支持将选项传递给@vue/component-compiler-utils，但现在可以通过config在4.0.0-rc.1中使用。templateCompiler.transformAssetUrls

即使启用了这个 URL 解析，Vue CLI 也会配置jest为-ed 媒体返回一个空字符串require，包括 images 。如果您的测试需要在生产中使用正常解析的 URL，您将需要一个模仿url-loader. Vue CLI 配置加载器，如果大于 4KB，则返回解析的文件名；或 base64 数据 URL，否则。

要启用 URL 解析：

  1. 更新到vue-jest4：

    npm i -D vue-jest@4

  2. 为 custom 创建以下文件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 演示

于 2021-07-25T21:36:32.883 回答