How to add it to Jest configuration? about vue-svg-loader HOT 15 CLOSED

There is one major issue when it comes to integrating vue-svg-loader with Jest, and it is async behaviour. Jest's transforms are synchronous, webpack loaders can be both. That means we cannot use SVGO to process the SVG files, which can be bad in some cases. I suggest you and everybody to always pass the SVG files through SVGO before putting them in a project (for example using this great tool), so that the end result does not contain:

• XML declaration,
• <script> tags,
• <style> tags.

If your SVGs are prepared, create a transform file named for example svgTransform.js with:

const vueJest = require('vue-jest/lib/template-compiler');

module.exports = {
  process(content) {
    const { render } = vueJest({
      content,
      attrs: {
        functional: false,
      },
    });

    return `module.exports = { render: ${render} }`;
  },
};

And then modify your jest.config.js to use the transform file above (note that <rootDir> is injected by Jest):

module.exports = {
  transform: {
    '^.+\\.svg$': '<rootDir>/path/to/svgTransform.js',
  },
};

To test if everything works you need to start the tests with the --no-cache flag. Let me know if that works for you.

from vue-svg-loader.

@joaopslins It took a bit of digging, but here's how I got this working for @vue/vue2-jest and jest 28:

Update svgTransform.js to:

const VueTemplateCompiler = require('vue-template-compiler');

module.exports.process = (svgSource, filename) => {
  const result = VueTemplateCompiler.compileToFunctions(
    `${svgSource}`
  );

  return {
    code: `module.exports = { render: ${result.render} }`,
  };
}

jest.config.js stays the same:

module.exports = {
  transform: {
    '^.+\\.svg$': '<rootDir>/path/to/svgTransform.js',
  },
};

And as @visualfanatic pointed out, make sure you run jest with the --no-cache flag option i.e.

jest --no-cache

Otherwise you may not see any impact after updating svgTransform.js. I didn't realize jest was caching the transforms at first when I was trying to debug and wasted a good few hours because of it.

For reference:

• https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#compilercompiletofunctionstemplate
• https://jestjs.io/docs/28.0/code-transformation

from vue-svg-loader.

@koresar If that didn't work for you, check whether svg is present in another regular expression in other transform properties.

If you're using Vue CLI, it probably generated a line for all assets (including SVGs) that gets transformed with jest-transform-stub. If this line contains svg, just remove it, it should work.

module.exports = {
  // ...
  transform: {
    // ...
    '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '^.+\\.svg$': '<rootDir>/svgTransform.js'
  }
}

from vue-svg-loader.

Hi folks,

This solution is not working anymore after updating to vue-jest@4, or @vue/vue2-jest because this import fails require('vue-jest/lib/template-compiler');, since there's no template-compiler file anymore.

Does anyone figured out another workaround? Thanks!

from vue-svg-loader.

I follow the instruction of adding loader to jest
https://vue-svg-loader.js.org/faq.html#how-to-use-this-loader-with-jest

but this error appears

if your svg files have ?xml ? you'll get the error. So need just remove it:

const vueJest = require('vue-jest/lib/template-compiler');

module.exports = {
process (content) {
// remove . Should be one root element or get an error
if (content.startsWith('') + 2;
content = content.substring(svgElIndex);
}

const { render } = vueJest({
  content,
  attrs: {
    functional: false
  }
});

return `module.exports = { render: ${render} }`;

}
};

from vue-svg-loader.

if your svg files have ?xml ? you'll get the error. So need just remove it:

i removed my ?xml and still am encountering the above issue

• @fameches im trying to replicate your code but it seems there are some syntax errors and i dont understand what you're trying to get across

from vue-svg-loader.

from vue-svg-loader.

No problem at all 👍

from vue-svg-loader.

Just wanted to say that I also had this error, and your solution works like a charm with no modification 👍

Thanks!

from vue-svg-loader.

@koresar have you had a chance to test the solution above?

from vue-svg-loader.

I follow the instruction of adding loader to jest
https://vue-svg-loader.js.org/faq.html#how-to-use-this-loader-with-jest

but this error appears

from vue-svg-loader.

any update on this? Im running into the exact same error.

from vue-svg-loader.

Solution from @visualfanatic worked! However as I was using a later version of babel, I had to install babel bridge to make vue-jest compile properly.

npm i -D babel-core@^7.0.0-bridge.0

from vue-svg-loader.

As a sidenode, make sure to run --clearCache after you make this change... Since --no-cache only skips the cache and doesn't reset it, you maybe experience stale issues even after fixing your svgTransform.js if you don't reset it explicitly.

from vue-svg-loader.

@anthonylebrun Thank you! This worked well! I appreciate the help 🙇

from vue-svg-loader.