How to add it to Jest configuration?

[koresar]

The MyComponent is importing an SVG file, and then using it in the code. I cannot unit test such component because vue-svg-loader is not configured in my Jest.

import { shallowMount } from "@vue/test-utils";
import MyComponent from "../MyComponent";

describe("MyComponent.vue", () => {
    it("should put new date if is was passed via props", async () => {
        const wrapper = shallowMount(MyComponent, {
            propsData: {
                value: "2018-01-05"
            }
        });

The unit test throws... Cannot render the SVG.

How to add vue-svg-loader to the Jest configuration?

[damianstasik]

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.

[damianstasik]

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

[koresar]

Hello. Sorry mate. I had no chance. We've decided to just rename the file extension from .svg to .vue and wrap it in the <template> tag. As the result no additional configuration needed anywhere. Cheers

…

On Wed., 25 Jul. 2018, 20:50 Damian Stasik, ***@***.***> wrote: @koresar <https://github.com/koresar> have you had a chance to test the solution above? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#38 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABjCL1pdCsnd8I9q5aMSLeYmWxK9iWNdks5uKE2LgaJpZM4VfZIZ> .

[damianstasik]

No problem at all 👍

[joelworsham]

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

Thanks!

[sarahdayan]

@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'
  }
}

[engmagdy87]

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

[hendrikras]

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

[fameches]

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} }`;

}
};

[kylegoines]

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

[anandbhaskaran]

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

[joaopslins]

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!

[anthonylebrun]

@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

[anthonylebrun]

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.

[joaopslins]

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