SASS fails to compile files under Jest

[TheLonelyAdventurer]

Running sass.compile(path) wil throw a suspicious exception:

TypeError: J.getInterceptor$ax(...).map$1$1 is not a function

      at Object.map$1$1$ax (node_modules/sass/sass.dart.js:24596:44)
      at listDir_closure0.call$0 (node_modules/sass/sass.dart.js:87563:18)
      at Object._systemErrorToFileSystemException0 (node_modules/sass/sass.dart.js:20859:23)
      at Object.listDir0 (node_modules/sass/sass.dart.js:20854:16)
      at _realCasePath_helper_closure0.call$0 (node_modules/sass/sass.dart.js:85221:34)
      at JsLinkedHashMap.putIfAbsent$2 (node_modules/sass/sass.dart.js:27356:24)
      at _realCasePath_helper0.call$1 (node_modules/sass/sass.dart.js:85210:32)
      at _realCasePath_helper_closure0.call$0 (node_modules/sass/sass.dart.js:85217:35)
      at JsLinkedHashMap.putIfAbsent$2 (node_modules/sass/sass.dart.js:27356:24)
      at _realCasePath_helper0.call$1 (node_modules/sass/sass.dart.js:85210:32)

The code above was run using jest.

Basic code that reproduces the error:

const sass = require('sass');

const config =
	{ sourceMap: false
	, sourceMapIncludeSources: false
	, style: 'compressed'
	, verbose: true
	, logger: console
	, alertAscii: false
	, alertColor: true
	, functions: {}
	, importers: []
	, loadPaths: []
	, quietDeps: true
	};


function compile() {
	return sass.compile('test.scss');
}

console.log(compile());

The exact same code works when run outside jest.

I've tracked down the compiled js of sass up to this line of sass.dart.js:

which is called by:

which is in turn called by:

As expected these are the results in my debugger for checking the parameters:

I am not sure what map$1$1 is, but it seems to depend on the running environment as far as I understand the problem.

[akabekobeko]

I have the same problem in my environment, if I run sass.compile(path) without Jest it works fine.
There may be a problem with Dart's build or Jest's interpretation.

• JS Symbols can't be used as Dart map keys · Issue #47670 · dart-lang/sdk

[jathak]

Duplicate of #710.

[akabekobeko]

@jathak
Specifying testEnvironment: "node" in jest.config.js does not solve the problem.
This value currently defaults to node, but an error will still occur if explicitly specified.

If deprecated, the explanation in #710 is not sufficient. Either #710 or the "recommended method" resolves the error, or should explicitly state in the README or API reference that execution by Jest is not supported.

[lfdebrux]

We also had this issue, and also found that setting the Jest environment to "node" did not help.

However, we found another workaround, Instead, what did work is using the legacy API. I'm not sure why this is, but it seems to do the trick.

Note that with the legacy API, the file path is part of the options object, rather than being the
first argument. If you forget to change the call signature, you will get a different unhelpful error message:

NoSuchMethodError: method not found: 'call'

(this bit us a few times 😅 )

[jathak]

@akabekobeko @lfdebrux Does setting testEnvironment to jest-environment-node-single-context work? That's what we use here.

[akabekobeko]

@jathak
Thanks!
That way sass.compile(path) is now executable on Jest.

Add npm

$ npm i -D jest-environment-node-single-context

Config

module.exports = {
  testEnvironment: 'jest-environment-node-single-context',
  verbose: true,
  testTimeout: 10000,
  transform: {
    '^.+\\.ts$': 'ts-jest',
  },
};

Test on Jest

transpileCss calls sass.compile(path) internally.

import { transpileCss } from './css';

it('Transpile SCSS', () => {
  const css = transpileCss('sass', './src2/data/scss/app.scss');
  const expected = `body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #fbfcfa;
}`;
  expect(css).toBe(expected);
});

Result

 PASS  src2/css.test.ts
  ✓ Transpile SCSS (55 ms)

[TheLonelyAdventurer]

I tried to use it, but fails with:

TypeError: The "options.context" property must be an vm.Context. Received an instance of Object

Could it be because I'm using Yarn with pnp modules?

Reported in kayahr/jest-environment-node-single-context#10

[akabekobeko]

@TheLonelyAdventurer
I am running the tests with npm test, not using Yarn and pnp module. The following PR is an actual successful example.

• chore: Added test for AltCSS transpile by akabekobeko · Pull Request #17 · vivliostyle/vivliostyle-sitegen

[TheLonelyAdventurer]

@akabekobeko yeah it's probably a specific issue with Yarn

[mizdra]

I found another workaround. This method also works for testEnvironment: 'node'.

Here is the tricks:

• Disguise the test environment as a browser and bypass JS Symbols can't be used as Dart map keys dart-lang/sdk#47670
  • For some reason, JS Symbols can't be used as Dart map keys dart-lang/sdk#47670 does not occur in the browser environment :)
• When compiling sass, we pass our own importer
  • If you disguise as a browser, dart-sass will use the browser's path resolution algorithm to resolve the path.
  • This will result in a runtime error.
  • So, we pass an importer that implements the Node.js path resolution algorithm.

The following PR is an actual successful example.
mizdra/happy-css-modules@a42397b

[TheLonelyAdventurer]

I tried to use it, but fails with:

TypeError: The "options.context" property must be an vm.Context. Received an instance of Object

Could it be because I'm using Yarn with pnp modules?

Reported in kayahr/jest-environment-node-single-context#10

@TheLonelyAdventurer I am running the tests with npm test, not using Yarn and pnp module. The following PR is an actual successful example.

* [chore: Added test for AltCSS transpile by akabekobeko · Pull Request #17 · vivliostyle/vivliostyle-sitegen](https://github.com/vivliostyle/vivliostyle-sitegen/pull/17)

Update: the package also fails with yarn1 and NPM. I guess there is an issue with node modules.