dart sass erroring up no such file or directory for sass true

[mbellary-chwy]

I have recently started migrating to dart-sass instead of node-sass. While using node-sass. sass-true was all working fine. On using dart-sass and updating sass-true to 5.0.0, i am getting no such file or directory on running tests.

Steps to reproduce:

1. Checkout the repo: https://github.com/MansoorBashaBellary/dart-sass-true
2. Then do yarn
3. Then do yarn test

On doing that, getting below error:

dart-sass-true/src/components/mixin.spec.scss: no such file or directory

      17 |   }
      18 | 
    > 19 |   sassTrue.runSass(
         |            ^
      20 |     {
      21 |       importer,
      22 |       file: sassFile

      at Object._newRenderError (node_modules/sass/sass.dart.js:10817:19)
      at StaticClosure._newRenderError (node_modules/sass/sass.dart.js:10646:18)
      at Object.call$1 [as Primitives_applyFunction] (node_modules/sass/sass.dart.js:1060:30)
      at Object.Primitives_applyFunction [as Function_apply] (node_modules/sass/sass.dart.js:4883:16)
      at Function_apply (node_modules/sass/sass.dart.js:6563:16)
      at Object._call [as renderSync] (node_modules/sass/sass.dart.js:6541:18)
      at Object.renderSync [as runSass] (node_modules/sass-true/lib/main.js:46:18)
      at Suite.runSass (test/test-scss.spec.js:19:12)
      at Object.describe (test/test-scss.spec.js:8:1)

Could someone help me in determining the issue or am i doing things the way it is not supposed to do

[davidcmoulton]

I've just had a similar issue. I fixed it in my case by removing the sass injection into the trueOptions, equivalent to your code here. Then the paths to the test files resolved properly. Note that this is using Dart Sass 1.23.0, and seems to go against the docs at the section "For sass/dart-sass".

[mbellary-chwy]

Tests working fine on removing sass injection from trueOptions conveys that you are using node-sass. While i was using node-sass, unit testing with sass-true was all working fine. On starting to use dart-sass, i am getting this issues. So, let's expect appropriate fix for this issue instead of migrating to node-sass back.

[dwightjack]

I'm not sure if that's the same issue as the one reported in sass/dart-sass#710 (comment) (ie: jest + dart-sass + sass-true) but at the moment it looks like it's working by setting "testEnvironment": "node" in jest.

I guess the default jsdom environment has some sort of incompatibility with dart-sass.

[mbellary-chwy]

Thank you @dwightjack . testEnvironment: node fixed this issue. Thanks. Closing this issue

[johncrim]

I also encountered the same issue.

I had to create a separate jest.config.js for my sass tests, because my other jest tests are (Angular) front-end tests, and require jsdom. If I set testEnvironment: 'node' in my primary jest config, or --env node on the command line (equivalent), all the front-end tests fail b/c they require jsdom.

Note that I only saw this specific issue on Linux - on windows the tests work as expected with jest and dart-sass.

However, I also experienced another, almost surely related problem on Windows - the dart-sass @import / @use file resolution failed to find scss files in the same directory. So I (before discovering the testEnvironment: node workaround) had written my own importer, which fixed up the file resolution. After switching to testEnvironment: node, I was able to remove my importer b/c local file imports worked as expected.

Given all this, it seems safe to conclude that dart-sass file or path resolution doesn't work correctly within jest when using testEnvironment: jsdom.