Fix diff on unchanged (#419)

* create failing tests for indent config compliance

* use new serializer plugin API

* pass indentation config to css.stringify

Helps the library comply with Jest's serializer's indent configuration,
which in turn fixes #355

* add comments to serialize util in tests

* Manual updates post-rebase

 - Update test for new class format
 - Upgrade pretty-format to reduce indirect deps

Co-authored-by: fritz-c <[email protected]>
Co-authored-by: Ell Bradshaw <[email protected]>

Author: 3 people

package.json

@@ -45,6 +45,7 @@
     "preact": "^10.0.0-beta.2",
     "preact-render-to-json": "^3.6.6",
     "prettier": "^2.3.2",
+    "pretty-format": "^27.5.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",

src/styleSheetSerializer.js

@@ -70,15 +70,15 @@ const getAtRules = (ast, filter) =>
       return acc.concat(atRule);
     }, []);
 
-const getStyle = (classNames) => {
+const getStyle = (classNames, config = {}) => {
   const ast = getCSS();
   const filter = filterRules(classNames);
   const rules = ast.stylesheet.rules.filter(filter);
   const atRules = getAtRules(ast, filter);
 
   ast.stylesheet.rules = rules.concat(atRules);
 
-  return css.stringify(ast);
+  return css.stringify(ast, { indent: config.indent });
 };
 
 const getClassNamesFromSelectorsByHashes = (classNames, hashes) => {
@@ -137,7 +137,7 @@ module.exports = {
     );
   },
 
-  print(val, print) {
+  serialize(val, config, indentation, depth, refs, printer) {
     const nodes = getNodes(val);
     nodes.forEach(cache.add, cache);
 
@@ -149,9 +149,9 @@ module.exports = {
     classNames = filterClassNames(classNames, hashes);
     unreferencedClassNames = filterUnreferencedClassNames(unreferencedClassNames, hashes);
 
-    const style = getStyle(classNames);
+    const style = getStyle(classNames, config);
     const classNamesToReplace = getClassNamesFromSelectorsByHashes(classNames, hashes);
-    const code = print(val);
+    const code = printer(val, config, indentation, depth, refs);
 
     let result = serializerOptions.addStyles ? `${style}${style ? '\n\n' : ''}${code}` : code;
     result = stripUnreferencedClassNames(result, unreferencedClassNames);

test/styleSheetSerializer.spec.js

@@ -3,7 +3,9 @@ import { mount, shallow } from 'enzyme';
 import React from 'react';
 import renderer from 'react-test-renderer';
 import styled, { ThemeContext, ThemeProvider } from 'styled-components';
+import prettyFormat, { plugins } from 'pretty-format';
 import {setStyleSheetSerializerOptions} from '../serializer';
+import styleSheetSerializer from '../src/styleSheetSerializer';
 
 const toMatchSnapshot = (component) => {
   expect(renderer.create(component).toJSON()).toMatchSnapshot('react-test-renderer');
@@ -19,6 +21,31 @@ const shallowWithTheme = (tree, theme) => {
   return shallow(tree);
 };
 
+/**
+ * Serializes a value similarly to jest-snapshot
+ *
+ * Imitates the serialization logic inside jest-snapshot,
+ * so we can pass options, including indent, to it.
+ *
+ * @see https://github.com/facebook/jest/blob/615084195ae1ae61ddd56162c62bbdda17587569/packages/jest-snapshot/src/utils.ts#L155-L163
+ * @see https://github.com/facebook/jest/blob/615084195ae1ae61ddd56162c62bbdda17587569/packages/jest-snapshot/src/plugins.ts#L24-L32
+ */
+const serialize = (val, indent = 2) =>
+  prettyFormat(val, {
+    escapeRegex: true,
+    indent,
+    plugins: [
+      styleSheetSerializer,
+      plugins.ReactTestComponent,
+      plugins.ReactElement,
+      plugins.DOMElement,
+      plugins.DOMCollection,
+      plugins.Immutable,
+      plugins.AsymmetricMatcher,
+    ],
+    printFunctionName: false,
+  });
+
 it('null', () => {
   expect(null).toMatchSnapshot();
 });
@@ -346,3 +373,35 @@ it('allows to set a css classNameFormatter', () => {
     </div>
   );
 });
+
+it('responds to indent configuration', () => {
+  const Link = styled.a`
+    color: blue;
+  `;
+
+  const mounted = renderer.create(<Link>Styled, exciting Link</Link>);
+
+  expect(serialize(mounted)).toMatchInlineSnapshot(`
+    ".styledComponent0 {
+      color: blue;
+    }
+
+    <a
+      className=\\"styledComponent0\\"
+    >
+      Styled, exciting Link
+    </a>"
+  `);
+
+  expect(serialize(mounted, 0)).toMatchInlineSnapshot(`
+    ".styledComponent0 {
+    color: blue;
+    }
+
+    <a
+    className=\\"styledComponent0\\"
+    >
+    Styled, exciting Link
+    </a>"
+  `);
+});

typings/index.d.ts

@@ -1,4 +1,4 @@
-import { Plugin, NewPlugin } from 'pretty-format'
+import { NewPlugin } from 'pretty-format'
 import { css } from 'styled-components'
 
 declare global {
@@ -27,6 +27,6 @@ export interface StyledComponentsSerializerOptions {
   classNameFormatter?: (index: number) => string 
 } 
 
-export declare const styleSheetSerializer: Exclude<Plugin, NewPlugin> & { 
+export declare const styleSheetSerializer: NewPlugin & {
   setStyleSheetSerializerOptions: (options?: StyledComponentsSerializerOptions) => void 
-};
+};

yarn.lock

@@ -6200,6 +6200,15 @@ pretty-format@^27.0.2, pretty-format@^27.3.1:
     ansi-styles "^5.0.0"
     react-is "^17.0.1"
 
+pretty-format@^27.5.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e"
+  integrity sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==
+  dependencies:
+    ansi-regex "^5.0.1"
+    ansi-styles "^5.0.0"
+    react-is "^17.0.1"
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"