inline scss require issue

[Mende]

in my app we import scss as part of our webpack build. Is there a way to tell the babel transpiler to ignore any imports of scss/jpg/png etc. when it's parsing?

In mocha i use a null-loader for all non javascript transpiling.

[zordius]

Not sure this can help you:

• If you use istanbul for coverage, the babel transpiler is controlled by gulp-jsx-coverage , you can use these options to skip transpiler:

    transpile: {                                     // this is default whitelist/blacklist for transpilers
        babel: {
            include: /\.jsx?$/,
            exclude: /node_modules/,       // <=== add regexp for your scss/jpg/png
            omitExt: false                           // if you wanna omit file ext when require(), put an array
        },

• If you use isparta for coverage, the babel transpiler is controlled by isparta and you may customize babel with babel option. Refer to this document https://babeljs.io/docs/usage/options/ , maybe ignore or only works for you:

    babel: {                                         // will pass to babel
        sourceMap: 'both',                            // get hints in covarage reports or error stack
        ignore: ['**/*.jpg', '**/*.scss']             // <=== Try this?
    },

If these tips work for you just let me know. If can't, please provide an example project to help me figure out the key point, thank you!

[Mende]

We're using isparta so i used the 2nd option. unfortunately no change. Here's the stacktrace.

$ gulp cover
[10:55:26] Using gulpfile ~/Repos/core-frontend/gulpfile.js
[10:55:26] Starting 'cover'...
[10:55:30] 'cover' errored after 3.83 s
[10:55:30] Error in plugin 'gulp-mocha'
Message:
    Error when instrument /Users/mende/Repos/core-frontend/app/components/AvailabilityStatus.scss: SyntaxError: /Users/mende/Repos/core-frontend/app/components/AvailabilityStatus.scss: Unexpected token (1:0)
Stack:
Error: Error when instrument /Users/mende/Repos/core-frontend/app/components/AvailabilityStatus.scss: SyntaxError: /Users/mende/Repos/core-frontend/app/components/AvailabilityStatus.scss: Unexpected token (1:0)
    at Object.moduleLoader [as .js] (/Users/mende/Repos/core-frontend/node_modules/gulp-jsx-coverage/index.js:136:23)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Object.<anonymous> (/Users/mende/Repos/core-frontend/app/components/AvailabilityStatus.jsx:9:1396)
    at Module._compile (module.js:435:26)
    at Object.moduleLoader [as .js] (/Users/mende/Repos/core-frontend/node_modules/gulp-jsx-coverage/index.js:140:16)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)

We had success running it with commandline here's the command

node $(npm bin)/isparta cover --report text --report html --include "**/*.js" --include "**/*.jsx" --root app $(npm bin)/_mocha -- spec

Here's a gist of our gulpfile

https://gist.github.com/mende/3447e03685686a361a1f

[Mende]

Updated gist with mocha.opts we are running a custom compiler that noops scss and images.

[zordius]

Thank you for your stacktrace! From the stack trace I can know the instrumentation is also done by gul-jsx-coverage and you can use options.istanbul.exclude to prevent none js file be handled.

You can try to change https://gist.github.com/mende/3447e03685686a361a1f#file-gulpfile-js-L8 from exclude: /node_modules/ to exclude: /(node_modules.+)|(.+\.s?css)$/

[Mende]

that worked. it's no longer complaining about the scss files (I will add the additional stuff to ignore images myself). New error, Cannot find Module 'sigmund'. is that one of your dependancies? we don't use it directly.

[zordius]

No, it also not my direct dependency. https://www.npmjs.com/package/sigmund