Add basic test setup

Author: GuilleDF

Diff for: babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@babel/preset-env', '@babel/preset-react'],
+};

Diff for: jest.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  testEnvironment: 'jsdom',
+  moduleFileExtensions: ['js'],
+  testMatch: ['**/test/**/*.js'],
+};

Diff for: package.json

@@ -4,7 +4,7 @@
   "description": "Jest snapshot serializer for JSS",
   "main": "src/jss-snapshot-serializer.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "jest"
   },
   "repository": {
     "type": "git",
@@ -22,5 +22,16 @@
   "bugs": {
     "url": "https://github.com/cssinjs/jss-snapshot-serializer/issues"
   },
-  "homepage": "https://github.com/cssinjs/jss-snapshot-serializer#readme"
+  "homepage": "https://github.com/cssinjs/jss-snapshot-serializer#readme",
+  "devDependencies": {
+    "@babel/preset-env": "^7.13.9",
+    "@babel/preset-react": "^7.12.13",
+    "@testing-library/react": "^11.2.5",
+    "babel-jest": "^26.6.3",
+    "jest": "^26.6.3",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-jss": "^10.5.1",
+    "styled-jss": "^2.2.3"
+  }
 }

Diff for: src/jss-snapshot-serializer.js

@@ -10,15 +10,16 @@ const collectElements = (element, elements = []) => {
   elements.push(element);
 
   if (element.children) {
-    element.children.forEach(child => collectElements(child, elements));
+    element.children.forEach((child) => collectElements(child, elements));
   }
 
   return elements;
 };
 
-const markElements = nodes => nodes.forEach((element) => {
-  element[MARKER] = true;
-});
+const markElements = (nodes) =>
+  nodes.forEach((element) => {
+    element[MARKER] = true;
+  });
 
 const replaceJssClassNames = (elements) => {
   elements.forEach((element) => {
@@ -40,7 +41,10 @@ const replaceJssClassNames = (elements) => {
         if (!jssClassNameRegexp.test(className)) return className;
 
         const lastDashPosition = className.lastIndexOf('-');
-        const secondLastDashPosition = className.lastIndexOf('-', lastDashPosition - 1);
+        const secondLastDashPosition = className.lastIndexOf(
+          '-',
+          lastDashPosition - 1
+        );
 
         return className.substring(0, secondLastDashPosition);
       });
@@ -49,11 +53,14 @@ const replaceJssClassNames = (elements) => {
   });
 };
 
-
 module.exports = {
   test(value) {
     // apply the serializer only to react elements that we haven't marked(processed) before
-    return value && !value[MARKER] && value.$$typeof === Symbol.for('react.test.json');
+    return (
+      value &&
+      !value[MARKER] &&
+      value.$$typeof === Symbol.for('react.test.json')
+    );
   },
 
   print(value, serialize) {

Diff for: test/__snapshots__/react-jss.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`react-jss removes non-deterministic class names 1`] = `
+<DocumentFragment>
+  <div
+    class="redBox-0-2-1"
+  />
+</DocumentFragment>
+`;

Diff for: test/__snapshots__/styled-jss.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`styled-jss removes non-deterministic class names 1`] = `
+<DocumentFragment>
+  <div
+    class="div-1-0-1-1"
+  />
+</DocumentFragment>
+`;

Diff for: test/react-jss.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { createUseStyles } from 'react-jss';
+import { render } from '@testing-library/react';
+import serializer from '../src/jss-snapshot-serializer';
+
+expect.addSnapshotSerializer(serializer);
+
+const useStyles = createUseStyles({
+  redBox: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'red',
+  },
+});
+
+const RedBox = () => {
+  const classes = useStyles();
+  return <div className={classes.redBox} />;
+};
+
+describe('react-jss', () => {
+  it('removes non-deterministic class names', () => {
+    const redBox = render(<RedBox />).asFragment();
+    expect(redBox).toMatchSnapshot();
+  });
+});

Diff for: test/styled-jss.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import styled from 'styled-jss';
+import { render } from '@testing-library/react';
+import serializer from '../src/jss-snapshot-serializer';
+
+expect.addSnapshotSerializer(serializer);
+
+const RedBox = styled('div')({
+  width: 100,
+  height: 100,
+  backgroundColor: 'red',
+});
+
+describe('styled-jss', () => {
+  it('removes non-deterministic class names', () => {
+    const redBox = render(<RedBox />).asFragment();
+    expect(redBox).toMatchSnapshot();
+  });
+});