boopathi/react-svg-loader

module not loaded in testing env

cjbuchmann-work opened this issue · 1 comments

This is more or less a duplicate of the closed ticket here : #176

It seems that the react-svg-loader doesn't work in our testing environments.

I was hoping that I could get some instruction on integrating this into our testing environment. In our Jest suite, it seems like this doesn't get loaded properly.

I was originally using this without the webpack configuration and doing

const icon = require(`react-svg-loader!./icons/${ name }.svg`);

This worked fine outside of testing, but in testing it threw a Cannot find module error on an icon with a valid path.

I tried integrating the webpack configuration and my require then switched to

const icon = require(`./icons/${ name }.svg`);

Which also works fine outside of testing. During testing it throws the error

 ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<?xml version="1.0" encoding="UTF-8"?>
                                                                                             ^
    
    SyntaxError: Unexpected token <

So it doesn't seem like the react-svg-loader is being properly integrated, but I can't see why. Any help here would be appreciated.

nring commented

@cjbuchmann-work More of a workaround I think, but we were able to fix this error by stubbing out the svg. See https://jestjs.io/docs/en/webpack#handling-static-assets

In our jest config in package.json, we added

    "moduleNameMapper": {
      "\\.(svg)$": "<rootDir>/__mocks__/fileMock.js"
    }

And then added the fileMock.js as described in the above link.