Sass imports in node module

[JakeGinnivan]

Issue description or question

We have an internal component library which still has scss imports which I can't seem to get to compile.

...\node_modules\component-library\dist\component\some_component\some_component.scss:1​​
​​({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){@import '../../scss/settings/variables';​​

Wallaby.js configuration file

module.exports = function (wallaby) {
    var path = require('path')
    process.env.NODE_PATH +=
        path.delimiter + path.join(wallaby.projectCacheDir, 'common')

    return {
        // for node.js tests you need to set env property as well
        // https://wallabyjs.com/docs/integration/node.html
        files: [
            'common/**/*.ts*',
            'server/**/*.ts*',
            { pattern: '**/*.scss*', load: false, instrument: false },
            'jest.json',
            '!common/**/*.spec*.ts*',
            '!server/**/*.spec*.ts*'
        ],

        tests: [
            'server/**/*.spec*.ts*',
            'common/**/*.spec*.ts*'
        ],

        env: {
            type: 'node',
            runner: 'node'
        },

        testFramework: 'jest',

        setup: function (wallaby) {
            require.extensions['.scss'] = () => ''
        },
        preprocessors: {
            '**/*.scss': file => ''
        },
    }
}

Code editor or IDE name and version

Visual Studio Code v1.x

OS name and version

Windows

[ArtemGovorov]

Hey Jake,

this:

require.extensions['.scss'] = () => ''

would work in plain node/mocha, but jest has its own module loading mechanism, so in order to mock certain files, you need to use the jest moduleNameMapper setting. See more details here.

You may create a <rootDir>/stub.js file with just module.exports = {}; in it, and add this to your setup function:

    setup: function (wallaby) {
      // or add the moduleNameMapper setting to jest config in your package.json instead
      wallaby.testFramework.configure({
        moduleNameMapper: {
          '^.+\\.scss$': '<rootDir>/stub.js'
        }
      });
    },

Let me know if it fixes the issue for you.

[JakeGinnivan]

That was it, thanks heaps @ArtemGovorov