Strip static class names from jest snapshot results (#320)

Author: blnoonan

src/styleSheetSerializer.js

@@ -44,6 +44,7 @@ const getClassNames = nodes =>
   }, new Set());
 
 const filterClassNames = (classNames, hashes) => classNames.filter(className => hashes.includes(className));
+const filterUnreferencedClassNames = (classNames, hashes) => classNames.filter(className => className.startsWith('sc-') && !hashes.includes(className));
 
 const includesClassNames = (classNames, selectors) =>
   classNames.some(className => selectors.some(selector => selector.includes(className)));
@@ -91,6 +92,10 @@ const replaceClassNames = (result, classNames, style) =>
     .filter(className => style.includes(className))
     .reduce((acc, className, index) => acc.replace(new RegExp(className, 'g'), `c${index++}`), result);
 
+const stripUnreferencedClassNames = (result, classNames) =>
+    classNames
+      .reduce((acc, className) => acc.replace(new RegExp(`${className}\\s?`,'g'), ''), result);
+
 const replaceHashes = (result, hashes) =>
   hashes.reduce(
     (acc, className) => acc.replace(new RegExp(`((class|className)="[^"]*?)${className}\\s?([^"]*")`, 'g'), '$1$3'),
@@ -113,13 +118,17 @@ module.exports = {
     const hashes = getHashes();
 
     let classNames = [...getClassNames(nodes)];
+    let unreferencedClassNames = classNames;
+
     classNames = filterClassNames(classNames, hashes);
+    unreferencedClassNames = filterUnreferencedClassNames(unreferencedClassNames, hashes);
 
     const style = getStyle(classNames);
     const classNamesToReplace = getClassNamesFromSelectorsByHashes(classNames, hashes);
     const code = print(val);
 
     let result = `${style}${style ? '\n\n' : ''}${code}`;
+    result = stripUnreferencedClassNames(result, unreferencedClassNames);
     result = replaceClassNames(result, classNamesToReplace, style);
     result = replaceHashes(result, hashes);
 

test/__snapshots__/styleSheetSerializer.spec.js.snap

@@ -647,6 +647,64 @@ exports[`referring to other components: react-testing-library 1`] = `
 </a>
 `;
 
+exports[`referring to other unreferenced components: mount 1`] = `
+.c0 {
+  font-size: 1.5em;
+  color: palevioletred;
+  font-weight: bold;
+}
+
+<div>
+  <Styled(styled.a)>
+    <a
+      className="c0"
+    >
+      Styled, exciting Link
+    </a>
+  </Styled(styled.a)>
+</div>
+`;
+
+exports[`referring to other unreferenced components: react-test-renderer 1`] = `
+.c0 {
+  font-size: 1.5em;
+  color: palevioletred;
+  font-weight: bold;
+}
+
+<div>
+  <a
+    className="c0"
+  >
+    Styled, exciting Link
+  </a>
+</div>
+`;
+
+exports[`referring to other unreferenced components: react-testing-library 1`] = `
+.c0 {
+  font-size: 1.5em;
+  color: palevioletred;
+  font-weight: bold;
+}
+
+<div>
+  <a
+    class="c0"
+  >
+    Styled, exciting Link
+  </a>
+</div>
+`;
+
+exports[`referring to other unreferenced components: shallow 1`] = `
+<div>
+  <Styled(styled.a)>
+    Styled, exciting Link
+  </Styled(styled.a)>
+</div>
+`;
+
 exports[`shallow with theme 1`] = `
 .c0 {
   color: mediumseagreen;

test/styleSheetSerializer.spec.js

@@ -250,3 +250,20 @@ it('referring to other components', () => {
   expect(mount(component)).toMatchSnapshot('mount');
   expect(render(component).container.firstChild).toMatchSnapshot('react-testing-library');
 });
+
+it('referring to other unreferenced components', () => {
+  const UnreferencedLink = styled.a`
+    font-size: 1.5em;
+  `
+
+  const ReferencedLink = styled(UnreferencedLink)`
+    color: palevioletred;
+    font-weight: bold;
+  `
+
+  toMatchSnapshot(
+    <div>
+      <ReferencedLink>Styled, exciting Link</ReferencedLink>
+    </div>
+  );
+});