Configuring vue-jest: Does anyone know how to set up aliases for template/script src attributes in Vue?

Question

Configuring vue-jest: Does anyone know how to set up aliases for template/script src attributes in Vue?

Dependencies: "@vue/cli-plugin-unit-jest": "^4.5.13", "@vue/test-utils": "^1.2.1", "vue-jest": "^3.0.7"

I am dealing with an application that utilizes an alias (referred to as "foo") defined in vue.config.js:

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

This alias is used for both import statements and HTML tag src attributes...

In main.js:

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

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

I have tried using a moduleNameMapper in jest.config.js like this:

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

However, this approach does not seem to work for aliases present in the src attribute of HTML tags. Is there a way for vue-jest to interpret these paths specified in attribute paths through configuration options or other methods?

Any suggestions would be highly valuable.

javascript vue.js vuejs2 jestjs vue-jest

Answer 1

Answer №1

Decoding URLs in Single File Components

vue-jest does not handle the resolution of src URLs for top-level block tags in SFCs. As a workaround, utilize relative paths without aliases in

src/components/core/App/index.vue

:

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

URL Parsing within `<template>` Contents

vue-jest leverages @vue/component-compiler-utils for template compilation. However, enabling URL parsing mandates the use of the transformAssetUrls option. While version 3.x lacks support for passing options to @vue/component-compiler-utils, this capability is now available in 4.0.0-rc.1 through a

templateCompiler.transformAssetUrls

configuration.

Despite enabling URL parsing, Vue CLI configures jest to return an empty string for media required via require, such as images. To handle normally resolved URLs during production testing, implement a Jest transform akin to url-loader. Vue CLI customizes the loader to return the filename if exceeding 4KB or a base64 data URL otherwise.

To enable URL parsing:

Upgrade to vue-jest 4:
```
npm i -D vue-jest@4
```

Create a file for a personalized my-jest-url-loader that will be utilized later:

// <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 = ')
  }
}

To prevent inadvertently overwriting Vue CLI's default Jest presets, employ a merging utility (e.g., lodash.merge) to integrate a customized configuration into jest.config.js.
Add a vue-jest configuration within a Jest global, defining
```
templateCompiler.transformAssetUrls
```
.

Adjust the transformed preset's transform property to include our my-jest-url-loader transform for handling images. This necessitates removing other image transforms from the default Jest preset to avoid conflicts.

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

Demonstration on GitHub

Answer 2

Decoding URLs in Single File Components

vue-jest does not handle the resolution of src URLs for top-level block tags in SFCs. As a workaround, utilize relative paths without aliases in

src/components/core/App/index.vue

:

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

URL Parsing within `<template>` Contents

vue-jest leverages @vue/component-compiler-utils for template compilation. However, enabling URL parsing mandates the use of the transformAssetUrls option. While version 3.x lacks support for passing options to @vue/component-compiler-utils, this capability is now available in 4.0.0-rc.1 through a

templateCompiler.transformAssetUrls

configuration.

Despite enabling URL parsing, Vue CLI configures jest to return an empty string for media required via require, such as images. To handle normally resolved URLs during production testing, implement a Jest transform akin to url-loader. Vue CLI customizes the loader to return the filename if exceeding 4KB or a base64 data URL otherwise.

To enable URL parsing:

Upgrade to vue-jest 4:
```
npm i -D vue-jest@4
```

Create a file for a personalized my-jest-url-loader that will be utilized later:

// <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 = ')
  }
}

To prevent inadvertently overwriting Vue CLI's default Jest presets, employ a merging utility (e.g., lodash.merge) to integrate a customized configuration into jest.config.js.
Add a vue-jest configuration within a Jest global, defining
```
templateCompiler.transformAssetUrls
```
.

Adjust the transformed preset's transform property to include our my-jest-url-loader transform for handling images. This necessitates removing other image transforms from the default Jest preset to avoid conflicts.

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

Demonstration on GitHub

Configuring vue-jest: Does anyone know how to set up aliases for template/script src attributes in Vue?

Answer №1

Decoding URLs in Single File Components

URL Parsing within `<template>` Contents

Similar questions

What is the best way to view and use the data stored within this JSON object?

Using VueLoaderPlugin() results in an 'undefined error for 'findIndex' function

implementing automatic ajax requests when user scrolls

Is there a way to verify if a Backbone.View is actively displayed in the DOM?

Receiving JSON information from a web address using Javascript

Find the differences between the values in two arrays of objects and eliminate them from the first array

Ways to check requests that need authentication of the user in Express

Analyzing string values in Cypress

Unable to implement multiple draggable inner objects using Angular 5 and dragula library

I am curious about the inner workings of the `createApplication()` function in the ExpressJS source code. Can you shed some light on

Is there a way to implement absolute imports in both Storybook and Next.js?

Having trouble retrieving information from the local API in React-Native

Developing desktop applications using C# scripting

Contrast between PHP and JavaScript output texts

Leveraging Ajax with Google Analytics

Select the send all text option when making a request

I'm currently in the process of creating a snake game using HTML5. Can you help me identify any issues or problems that

Tips for creating a filter in React JS using checkboxes

The behavior of Date's constructor differs when applied to trimmed versus untrimmed strings

Trouble accessing environment variables within a React application, specifically when using webpack's DefinePlugin in a Dockerfile

Configuring vue-jest: Does anyone know how to set up aliases for template/script src attributes in Vue?

Answer №1

Decoding URLs in Single File Components

URL Parsing within <template> Contents

Similar questions

What is the best way to view and use the data stored within this JSON object?

Using VueLoaderPlugin() results in an 'undefined error for 'findIndex' function

implementing automatic ajax requests when user scrolls

Is there a way to verify if a Backbone.View is actively displayed in the DOM?

Receiving JSON information from a web address using Javascript

Find the differences between the values in two arrays of objects and eliminate them from the first array

Ways to check requests that need authentication of the user in Express

Analyzing string values in Cypress

Unable to implement multiple draggable inner objects using Angular 5 and dragula library

I am curious about the inner workings of the `createApplication()` function in the ExpressJS source code. Can you shed some light on

Is there a way to implement absolute imports in both Storybook and Next.js?

Having trouble retrieving information from the local API in React-Native

Developing desktop applications using C# scripting

Contrast between PHP and JavaScript output texts

Leveraging Ajax with Google Analytics

Select the send all text option when making a request

I'm currently in the process of creating a snake game using HTML5. Can you help me identify any issues or problems that

Tips for creating a filter in React JS using checkboxes

The behavior of Date's constructor differs when applied to trimmed versus untrimmed strings

Trouble accessing environment variables within a React application, specifically when using webpack's DefinePlugin in a Dockerfile

URL Parsing within `<template>` Contents