Unable to resolve files inside Jest

[cshawaus]

I'm currently messing around with Sass True and Dart Sass but I'm running into an issue by which the renderSync method in Dart Sass is unable to resolve any paths I give to it. Please see the error below.

source/<removed>/scss/tests/font-face.spec.scss: no such file or directory

      15 |
      16 | sassTestFiles.forEach(file => {
    > 17 |   const rendered = sass.renderSync({ file })
         |                         ^
      18 |
      19 |   console.log(rendered)
      20 | })

I've gone through the implementation several times and I can't see where I'm going wrong as it seems like such a simple example that I expect to work since sass-loader is working as expected with Dart Sass.

Below is the code in question which runs inside Jest but I have also tried inside a vanilla node script and it works just fine so I'm not sure if it is a Jest or Dart Sass issue.

import { resolve } from 'path'
import { sync } from 'glob'
import sass from 'sass'

const sassTestFiles = sync(resolve(process.cwd(), 'source/**/*.spec.scss'))

sassTestFiles.forEach(file => {
  const rendered = sass.renderSync({ file })

  console.log(rendered)
})

Any help would be appreciated.

[nex3]

If this is only an issue within Jest, I suggest filing an issue there. I'm not familiar with Jest, and without a reproduction that uses the raw Sass API there's not much I can do.

[justinappler]

@cshawaus Did you find a solution to this?

[dwightjack]

@cshawaus @justinappler I tried the same setup and had the same problem.
Since with node-sass everything was working fine I guessed it could be an issue with the default Jest environment. In my case setting "testEnvironment": "node" on the jest config seems to fix the problem.

[johncrim]

I also encountered the same issue. I documented my findings in true repo, but I'm duplicating it here b/c the root problem is an interaction between jest (when using testEnvironment: 'jsdom') and dart-sass.

As others reported, using testEnvironment: 'node' in my jest.config allowed me to use sass.dart.js normally. 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.

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 in dart-sass.

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.

I can provide a repro if helpful (without using sass-true), but I'm not able to isolate the problem to just sass.dart.js - the repro would include jest and sass.dart.js.

[nex3]

I also encountered the same issue. I documented my findings in true repo, but I'm duplicating it here b/c the root problem is an interaction between jest (when using testEnvironment: 'jsdom') and dart-sass.

As others reported, using testEnvironment: 'node' in my jest.config allowed me to use sass.dart.js normally. 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.

Dart Sass uses many Node APIs, so I'm surprised it does anything outside a Node environment.

[apaatsio]

The suggested workaround does not work with Create React App because it's not possible to override the testEnvironment option. There is a github issue (facebook/create-react-app#8880) about this but no one from the CRA team has responded so I'm not gonna hold my breath.

My solution was to switch to node-sass.

[nex3]

How does Node Sass work without a Node environment?

[apaatsio]

@nex3 Jest does not run tests in a browser. It uses jsdom ("fake DOM") to mimic browser environment. So, it is still running in a Node environment.

I tracked the bug down to this line:

dart-sass/lib/src/node.dart

Line 133 in 7160b64

var file = options.file == null ? null : p.absolute(options.file);

path.absolute() returns a URL in Node/jsdom/Jest environment when it should return a file system path. For example, path.absolute("/home/user/project/styles.scss") returns http://localhost/home/user/project/styles.scss when it should return just /home/user/project/styles.scss.

path probably thinks it's running inside a browser because window.location.href is defined by jsdom. (See path FAQ).

Edit: I created a reproduction of the issue at https://github.com/apaatsio/dart-sass-issue-710

git clone [email protected]:apaatsio/dart-sass-issue-710.git
cd dart-sass-issue-710
yarn install
yarn test --watchAll

[nex3]

@apaatsio Thanks for tracking that down! It looks like it's another example of a longstanding thorn in our side, dart-lang/sdk#27979.

[zaydek]

I just ran into this or something related to this myself.

I found in the Jest docs you can use this comment to change the test environment per file. As mentioned previously in this thread, you can also change test environment project-wise.

/**
 * @jest-environment node
 */

From the docs: https://jestjs.io/docs/en/configuration#testenvironment-string.

Apparently jsdom is somehow incompatible with the file system. Anyway, by telling Jest you want node to be the test environment, that fixed things for me.

Example code:

/**
 * @jest-environment node
 */
import sass from "sass";

test("test", () => {
	const result = sass.renderSync({
		file: "src/file.scss",
	});
	expect(result.css.toString()).toBe("...")
})

[PatrickHollweck]

I had the same issue as @zaydek the explaination by @apaatsio is correct.

Can confirm that it is not an issue in dart-sass, but jest.

Just for anyone having the same issue:
If you don't want to change this in every single file you can also put the following into your projects package.json which will enable this setting globally.

"jest": {
  "testEnvironment": "node"
},

[MageJohn]

If changing the testEnvironment isn't an option for you, this kinda worked for us:

delete window.location;
window.location =  {
  href: __dirname
}

It could then correctly find the file. However, we then ran into issues with importing files, so unless that can be solved this might only work if your file is standalone.