Unable to test components with sass imports in view

[andlebed]

I'm submitting a bug report

• Library Version: 1.0.0-beta.3.0.1

Please tell us about your environment:

• Operating System: OSX 10.12.5

• Node Version: 7.9.0

• NPM Version: 5.0.3

• JSPM OR Webpack AND Version webpack 2.6.1

• Language: ESNext

Current behavior: I'm trying to test a component that requires SCSS in its view with Jest

<require from="./standard-button.scss"></require>

Test has a normal setup:

component = StageComponent
      .withResources('resources/button/standard-button')
      .inView('<standard-button></standard-button>');

The test is started with

await component.create(bootstrap);

And fails with

 Failed: Failed loading required CSS file: resources/button/standard-button.scss

      at stackFormatter (node_modules/jest-jasmine2/build/expectationResultFactory.js:30:20)
      at test/util/async-helper.js:7:12

However, I've found a workaround

import {TextHandler, ExtensionHandlers} from 'aurelia-loader-nodejs';

ExtensionHandlers['.scss'] = TextHandler;
ExtensionHandlers['.sass'] = TextHandler;

Expected/desired behavior:

Be able to test components with such imports

[dweber019]

Have time same with jest.

[stevies]

Any update on plans for fixing this? The workaround appears to work. And you can add:

import {TextHandler, ExtensionHandlers} from 'aurelia-loader-nodejs';
ExtensionHandlers['.scss'] = TextHandler;
ExtensionHandlers['.sass'] = TextHandler;

to jest-pretest..js to set this up for every test. So not a big deal - but maybe it should be fixed so the work-around is not needed. Or is there a setting in Webpack/Jest that I have missed?

[aminmsvi]

Thanks for the workaround, It fixed that error. But now I get a new error Could not parse CSS stylesheet, but this one does not cause my tests to fail and they run successfully. Not sure if there is a problem with how I load .scss files using webpack or there is a problem in module itself. It would be great if someone could point me to the right direction since I am stuck with this error for a few days now and can not find a fix for it. Here is the stacktrace for this error. Stacktrace:

console.error node_modules\jsdom\lib\jsdom\virtual-console.js:29    Error: Could not parse CSS Stylesheet
    at Object.<anonymous>.exports.evaluateStylesheet ([Project Path]\node_modules\jsdom\lib\jsdom\living\helpers\stylesheets.js:18:21)
    at HTMLStyleElementImpl._attach ([Project Path]\node_modules\jsdom\lib\jsdom\living\nodes\HTMLStyleElement-impl.js:23:5)
    at HTMLHeadElementImpl.insertBefore ([Project Path]\node_modules\jsdom\lib\jsdom\living\nodes\Node-impl.js:230:22)
    at HTMLHeadElementImpl.appendChild ([Project Path]\node_modules\jsdom\lib\jsdom\living\nodes\Node-impl.js:328:17)
    at HTMLHeadElement.appendChild ([Project Path]\node_modules\jsdom\lib\jsdom\living\generated\Node.js:203:45)
    at HTMLHeadElement.proto.(anonymous function) [as appendChild] ([Project Path]\node_modules\aurelia-pal-nodejs\dist\nodejs-pal-builder.js:47:24)
    at NodeJsDom.injectStyles ([Project Path]\node_modules\aurelia-pal-nodejs\dist\nodejs-dom.js:83:25)
    at [Project Path]\node_modules\aurelia-templating-resources\dist\commonjs\css-resource.js:71:25

[michaelw85]

Running into the same issue. Using the work around only replaced the initial error with the error mentioned by @aminmsvi. Seems like the text handler is not capable of handling the sass file correctly. Did anyone manage to really fix this issue?

[michaelw85]

@aminmsvi @andlebed I added the following to my jest-pretest setup to get it working without throwing errors: (this will ignore the styling in jest)

ExtensionHandlers['.scss'] = (path) => new Promise((resolve) => resolve(path));

[michaelw85]

Anyone stumbling upon this issue and looking for a solution please see: https://github.com/aurelia/cli/pull/1068#issuecomment-470309926

TL&DR Install jest-transform-stub Add ".+\\.scss$": "jest-transform-stub"