Fix issue #317 (#319)

After the first render the node are marked with KEY property and calling rerender function of react-testing-library the test function will return false preventing the print to work as expected

Author: marcosvega91

src/styleSheetSerializer.js

@@ -1,8 +1,7 @@
 const css = require('css');
 const { getCSS, getHashes } = require('./utils');
 
-const KEY = '__jest-styled-components__';
-
+let cache = new WeakSet()
 const getNodes = (node, nodes = []) => {
   if (typeof node === 'object') {
     nodes.push(node);
@@ -15,8 +14,6 @@ const getNodes = (node, nodes = []) => {
   return nodes;
 };
 
-const markNodes = (nodes) => nodes.forEach((node) => (node[KEY] = true));
-
 const getClassNamesFromDOM = (node) => Array.from(node.classList);
 const getClassNamesFromProps = (node) => {
   const classNameProp = node.props && (node.props.class || node.props.className);
@@ -121,11 +118,11 @@ module.exports = {
 
   /**
    * Configure jest-styled-components/serializer
-   * 
-   * @param {{ addStyles?: boolean, classNameFormatter?: (index: number) => string }} options 
+   *
+   * @param {{ addStyles?: boolean, classNameFormatter?: (index: number) => string }} options
    */
   setStyleSheetSerializerOptions(options = {}) {
-    serializerOptions = { 
+    serializerOptions = {
       ...serializerOptionDefaults,
       ...options
     };
@@ -134,14 +131,14 @@ module.exports = {
   test(val) {
     return (
       val &&
-      !val[KEY] &&
+      !cache.has(val) &&
       (val.$$typeof === Symbol.for('react.test.json') || (global.Element && val instanceof global.Element))
     );
   },
 
   print(val, print) {
     const nodes = getNodes(val);
-    markNodes(nodes);
+    nodes.forEach(cache.add, cache);
 
     const hashes = getHashes();
 
@@ -159,7 +156,7 @@ module.exports = {
     result = stripUnreferencedClassNames(result, unreferencedClassNames);
     result = replaceClassNames(result, classNamesToReplace, style, serializerOptions.classNameFormatter);
     result = replaceHashes(result, hashes);
-
+    nodes.forEach(cache.delete, cache);
     return result;
   },
 };

test/__snapshots__/styleSheetSerializer.spec.js.snap

@@ -896,6 +896,32 @@ exports[`shallow with theme 1`] = `
 </button>
 `;
 
+exports[`should match the same snapshot rerendering the same element: first-render 1`] = `
+.c0 {
+  color: palevioletred;
+  font-weight: bold;
+}
+
+<div>
+  <div
+    class="c0"
+  />
+</div>
+`;
+
+exports[`should match the same snapshot rerendering the same element: second-render 1`] = `
+.c0 {
+  color: palevioletred;
+  font-weight: bold;
+}
+
+<div>
+  <div
+    class="c0"
+  />
+</div>
+`;
+
 exports[`strips unused styles: mount 1`] = `
 .c2 {
   color: blue;

test/styleSheetSerializer.spec.js

@@ -234,7 +234,7 @@ it('referring to other components', () => {
   const TextWithConditionalFormatting = styled.span`
     ${Container} & {
       color: yellow;
-      background-color: ${(props) => (props.error ? 'red' : 'green')};
+      background-color: ${props => (props.error ? 'red' : 'green')};
     }
   `;
 
@@ -301,6 +301,19 @@ it('referring to other unreferenced components', () => {
   );
 });
 
+it('should match the same snapshot rerendering the same element', () => {
+  const StyledDiv = styled.div`
+    color: palevioletred;
+    font-weight: bold;
+  `;
+
+  const {rerender, container} = render(<StyledDiv />);
+
+  expect(container).toMatchSnapshot('first-render');
+  rerender(<StyledDiv />);
+  expect(container).toMatchSnapshot('second-render');
+});
+
 it('allows to disable css snapshotting', () => {
   setStyleSheetSerializerOptions({ addStyles: false })
   const A = styled.div`