POC: rewrite jest-serializer-make-styles to JS

packages/jest-serializer-make-styles/jest.config.js

@@ -2,4 +2,5 @@ const { createConfig } = require('@fluentui/scripts/jest/jest-resources');
 
 module.exports = createConfig({
   moduleNameMapper: require('lerna-alias').jest(),
+  testRegex: '(/__tests__/.*|\\.(test|spec))\\.(js)$',
 });

packages/jest-serializer-make-styles/package.json

@@ -2,8 +2,7 @@
   "name": "@fluentui/jest-serializer-make-styles",
   "version": "9.0.0-alpha.14",
   "description": "Jest serializer for make-styles.",
-  "main": "lib/index.js",
-  "typings": "lib/index.d.ts",
+  "main": "src/index.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/microsoft/fluentui"

packages/jest-serializer-make-styles/src/index.ts → packages/jest-serializer-make-styles/src/index.js

@@ -1,27 +1,31 @@
-import { DEFINITION_LOOKUP_TABLE, RULE_CLASSNAME_INDEX, RULE_RTL_CLASSNAME_INDEX } from '@fluentui/make-styles';
+/** @internal */
+const RULE_CLASSNAME_INDEX = 1;
 
-export function print(val: string) {
-  const regexParts: string[] = [];
+/** @internal */
+const RULE_RTL_CLASSNAME_INDEX = 3;
+
+function print(val) {
+  const regexParts = [];
   const regex = lookupRegex();
   if (!regex) {
     return val;
   }
-  let result: RegExpExecArray | null = null;
+  let result = null;
   while ((result = regex.exec(val))) {
     const [name] = result;
-    const [definitions] = DEFINITION_LOOKUP_TABLE[name];
+    const [definitions] = global.DEFINITION_LOOKUP_TABLE[name];
     /**
      * Collects all classNames present in a definition and adds it as part of a regular expression
      * @example
      * rules = ["f16th3vw", "frdkuqy0", "fat0sn40", "fjseox00"]
      */
     const rules = Object.keys(definitions).map(key => {
-      const classes: string[] = [];
+      const classes = [];
       if (definitions[key][RULE_CLASSNAME_INDEX]) {
-        classes.push(definitions[key][RULE_CLASSNAME_INDEX]!);
+        classes.push(definitions[key][RULE_CLASSNAME_INDEX]);
       }
       if (definitions[key][RULE_RTL_CLASSNAME_INDEX]) {
-        classes.push(definitions[key][RULE_RTL_CLASSNAME_INDEX]!);
+        classes.push(definitions[key][RULE_RTL_CLASSNAME_INDEX]);
       }
       return classes.join('|');
     });
@@ -39,9 +43,9 @@ export function print(val: string) {
   return `"${valStrippedClassNames.replace(/className="\s*(\w*)\s*"/, 'className="$1"')}"`;
 }
 
-export function test(val: unknown) {
+function test(val) {
   if (typeof val === 'string') {
-    return lookupRegex()?.test(val) ?? false;
+    return (lookupRegex() && lookupRegex().test(val)) || false;
   }
   return false;
 }
@@ -56,8 +60,13 @@ export function test(val: unknown) {
  *
  */
 function lookupRegex() {
-  const definitionKeys = Object.keys(DEFINITION_LOOKUP_TABLE);
+  const definitionKeys = Object.keys(global.DEFINITION_LOOKUP_TABLE);
   if (definitionKeys.length) {
     return new RegExp(`${definitionKeys.join('|')}`, 'g');
   }
 }
+
+module.exports = {
+  print,
+  test,
+};

packages/jest-serializer-make-styles/src/index.test.tsx → packages/jest-serializer-make-styles/src/index.test.js

@@ -24,15 +24,15 @@ const useStyles3 = makeStyles({
   },
 });
 
-const Test = ({ id }: { id?: string }) => {
+const Test = ({ id }) => {
   const styles1 = useStyles1();
   const styles2 = useStyles2();
   const styles3 = useStyles3();
   const styles = mergeClasses('static-class', styles1.root, styles1.paddingLeft, styles2.paddingRight, styles3.display);
   return <div data-testid={id} className={styles} />;
 };
 
-const rtlWrapper: React.FC = ({ children }) => (
+const rtlWrapper = ({ children }) => (
   <ProviderContext.Provider value={{ dir: 'rtl', targetDocument: document }}>{children}</ProviderContext.Provider>
 );
 

packages/make-styles/src/constants.ts

@@ -12,6 +12,10 @@ export const SEQUENCE_PREFIX = '__';
 /** @internal */
 export const DEFINITION_LOOKUP_TABLE: Record<string, LookupItem> = {};
 
+if (process.env.NODE_ENV === 'test') {
+  global.MK_DEFINITION_LOOKUP_TABLE = DEFINITION_LOOKUP_TABLE;
+}
+
 // indexes for values in LookupItem tuple
 
 /** @internal */