feat(jest-config): add support for loading scss files (#10302)

* feat(jest-config): add support for loading scss files

* fix(test-utils): update convert logic for latest dart version

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

config/jest-config-carbon/index.js

@@ -21,7 +21,7 @@ module.exports = {
   ],
   transform: {
     '^.+\\.(js|jsx)$': require.resolve('./transform/jsTransform.js'),
-    '^.+\\.css$': require.resolve('./transform/cssTransform.js'),
+    '^.+\\.s?css$': require.resolve('./transform/cssTransform.js'),
     '^(?!.*\\.(js|jsx|css|json)$)': require.resolve(
       './transform/fileTransform.js'
     ),

config/jest-config-carbon/package.json

@@ -35,7 +35,8 @@
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2",
     "jest-circus": "^27.0.6",
-    "jest-watch-typeahead": "^0.6.4"
+    "jest-watch-typeahead": "^0.6.4",
+    "sass": "^1.45.0"
   },
   "devDependencies": {
     "react": "^17.0.1",

config/jest-config-carbon/transform/cssTransform.js

@@ -7,15 +7,48 @@
 
 'use strict';
 
-// This is a custom Jest transformer turning style imports into empty objects.
-// http://facebook.github.io/jest/docs/tutorial-webpack.html
+const { createHash } = require('crypto');
+const fs = require('fs');
+const sass = require('sass');
+const path = require('path');
+
+const THIS_FILE = fs.readFileSync(__filename);
 
 module.exports = {
-  process() {
-    return 'module.exports = {};';
+  process(_file, filepath) {
+    const result = sass.renderSync({
+      file: filepath,
+      outputStyle: 'compressed',
+    });
+    return `
+      const css = \`${result.css.toString()}\`;
+      let style;
+      beforeAll(() => {
+        style = document.createElement('style');
+        style.textContent = css;
+        document.head.appendChild(style);
+      });
+      afterAll(() => {
+        document.head.removeChild(style);
+      });
+    `;
   },
-  getCacheKey() {
-    // The output is always the same.
-    return 'cssTransform';
+  getCacheKey(sourceText, sourcePath, transformOptions) {
+    const { config, configString, instrument } = transformOptions;
+    return createHash('md5')
+      .update(THIS_FILE)
+      .update('\0', 'utf8')
+      .update(sourceText)
+      .update('\0', 'utf8')
+      .update(path.relative(config.rootDir, sourcePath))
+      .update('\0', 'utf8')
+      .update(configString)
+      .update('\0', 'utf8')
+      .update(instrument ? 'instrument' : '')
+      .update('\0', 'utf8')
+      .update(process.version)
+      .update('\0', 'utf8')
+      .update(sass.info)
+      .digest('hex');
   },
 };

packages/react/src/components/Accordion/__tests__/Accordion-test.js

@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import 'carbon-components/src/components/accordion/_accordion.scss';
+
 import React from 'react';
 import { default as Accordion, AccordionItem } from '../';
 import { cleanup, render, screen } from '@testing-library/react';

packages/test-utils/src/renderer.js

@@ -89,7 +89,7 @@ function convert(value) {
   }
 
   if (value instanceof types.Color) {
-    return value.toString();
+    return value.dartValue.toString();
   }
 
   if (value instanceof types.List) {

yarn.lock

@@ -19180,6 +19180,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"immutable@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "immutable@npm:4.0.0"
+  checksum: 4b5e9181e4d5fa06728a481835ec09c86367e5d03268666c95b522b7644ab891098022e4479a43c4c81a68f2ed82f10751ce5d33e208d7b873b6e7f9dfaf4d87
+  languageName: node
+  linkType: hard
+
 "import-cwd@npm:^2.0.0":
   version: 2.1.0
   resolution: "import-cwd@npm:2.1.0"
@@ -20882,6 +20889,7 @@ __metadata:
     jest-watch-typeahead: ^0.6.4
     react: ^17.0.1
     react-dom: ^17.0.1
+    sass: ^1.45.0
   languageName: unknown
   linkType: soft
 
@@ -30277,14 +30285,16 @@ resolve@^2.0.0-next.3:
   languageName: node
   linkType: hard
 
-"sass@npm:^1.43.3, sass@npm:^1.43.4":
-  version: 1.43.4
-  resolution: "sass@npm:1.43.4"
+"sass@npm:^1.43.3, sass@npm:^1.43.4, sass@npm:^1.45.0":
+  version: 1.45.0
+  resolution: "sass@npm:1.45.0"
   dependencies:
     chokidar: ">=3.0.0 <4.0.0"
+    immutable: ^4.0.0
+    source-map-js: ">=0.6.2 <2.0.0"
   bin:
     sass: sass.js
-  checksum: 9af80105dabd32752c60b4557115832982cf1019c02c952db6a26c61a3e18dc95044c896685e6e9a6d6dd6643fc411ecf2ea4a8a431a8a08a7510a45d5a492ae
+  checksum: f20d22ddf91e3571926535cdec9e1092780b0bf133ee6a68d25ee21fd3fcb94f4b1df90823fdc60cabf468776d3a6bb693fd89305698e70609eb47bcfb905f10
   languageName: node
   linkType: hard
 
@@ -31592,6 +31602,13 @@ resolve@^2.0.0-next.3:
   languageName: node
   linkType: hard
 
+"source-map-js@npm:>=0.6.2 <2.0.0":
+  version: 1.0.1
+  resolution: "source-map-js@npm:1.0.1"
+  checksum: 22606113d62bbd468712b0cb0c46e9a8629de7eb081049c62a04d977a211abafd7d61455617f8b78daba0b6c0c7e7c88f8c6b5aaeacffac0a6676ecf5caac5ce
+  languageName: node
+  linkType: hard
+
 "source-map-js@npm:^0.6.2":
   version: 0.6.2
   resolution: "source-map-js@npm:0.6.2"