Vue-svg-loader: Jest integration not working

[AasmundEndresen]

As mentioned by others in this closed issue:

The integration with Jest described in the docs:

• 
  is not working.

It only results in a very generic error.

[vue-jest] Error: Vue template compilation failed

      4 | module.exports = {
      5 |   process(content) {
    > 6 |     const { render } = vueJest({
        |                        ^
      7 |       content,
      8 |       attrs: {
      9 |         functional: false,

      at error (node_modules/vue-jest/lib/throw-error.js:2:9)
      at compileTemplate (node_modules/vue-jest/lib/template-compiler.js:29:5)
      at Object.process (svgTransform.js:6:24)
      at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:453:35)
      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:523:40)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)

Can anyone help identify a solution to this problem?

[dagadbm]

easy peazy solution i just found:

module.exports = {
    render: () => {},
};

just do this on a file called svgMock.js (or wathever)
and then add it on the moduleNameMapper (NOT transform):

    moduleNameMapper: {
        "\\.(svg).*$": "<rootDir>/../../svgMock.js",
    },

[RyuNIshimura]

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

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

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

how's this?

[sem4phor]

Can confirm that @RyuNIshimura solution is working in a project using mixed inline and img-tag svgs. Thank you!

[blimmer]

I was using @RyuNIshimura's transformer, but I'm having an issue where the SVG component is not responding to click events in test. It works correctly when it's run through webpack, but not when transformed with jest.

I wrote up a quick sample repo to show this issue: https://github.com/blimmer/vue-jest-svg-issue. Is there more needed to enable click-ing on transformed SVGs, like you can do when it runs through webpack?

[Vsevo1od]

@blimmer As a workaround you can use .vm.$emit('click')
e.g. demo.find('#svg-button').vm.$emit('click');