From b565405c099f23e9c90335e7cdc212491d927ef8 Mon Sep 17 00:00:00 2001
From: Kepler Sticka-Jones <kepler+git@stickajones.org>
Date: Thu, 21 Nov 2019 16:35:19 -0700
Subject: [PATCH] fix: serialize script elements wrapped in components

---
 package-lock.json                     | 31 ++++++++++
 package.json                          |  2 +
 src/__snapshots__/index.test.tsx.snap | 54 ++++++++++++++++++
 src/index.test.tsx                    | 82 +++++++++++++++++++++++++++
 src/index.tsx                         | 16 ++----
 tsconfig.json                         |  6 +-
 6 files changed, 176 insertions(+), 15 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6161d82..b738b69 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1658,6 +1658,15 @@
         "csstype": "^2.2.0"
       }
     },
+    "@types/react-test-renderer": {
+      "version": "16.9.1",
+      "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-16.9.1.tgz",
+      "integrity": "sha512-nCXQokZN1jp+QkoDNmDZwoWpKY8HDczqevIDO4Uv9/s9rbGPbSpy8Uaxa5ixHKkcm/Wt0Y9C3wCxZivh4Al+rQ==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/retry": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
@@ -11786,6 +11795,18 @@
       "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==",
       "dev": true
     },
+    "react-test-renderer": {
+      "version": "16.12.0",
+      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.12.0.tgz",
+      "integrity": "sha512-Vj/teSqt2oayaWxkbhQ6gKis+t5JrknXfPVo+aIJ8QwYAqMPH77uptOdrlphyxl8eQI/rtkOYg86i/UWkpFu0w==",
+      "dev": true,
+      "requires": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "react-is": "^16.8.6",
+        "scheduler": "^0.18.0"
+      }
+    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -12156,6 +12177,16 @@
       "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
       "dev": true
     },
+    "scheduler": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.18.0.tgz",
+      "integrity": "sha512-agTSHR1Nbfi6ulI0kYNK0203joW2Y5W4po4l+v03tOoiJKpTBbxpNhWDvqc/4IcOw+KLmSiQLTasZ4cab2/UWQ==",
+      "dev": true,
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
     "semantic-release": {
       "version": "15.13.31",
       "resolved": "https://registry.npmjs.org/semantic-release/-/semantic-release-15.13.31.tgz",
diff --git a/package.json b/package.json
index 89fab1f..8e14c02 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
     "@types/jest": "^24.0.17",
     "@types/node": "^12.7.2",
     "@types/react": "^16.8.25",
+    "@types/react-test-renderer": "^16.9.1",
     "@typescript-eslint/eslint-plugin": "^2.0.0",
     "@typescript-eslint/parser": "^2.0.0",
     "eslint": "^6.1.0",
@@ -63,6 +64,7 @@
     "jest-runner-prettier": "^0.3.1",
     "prettier": "^1.18.2",
     "react": "^16.9.0",
+    "react-test-renderer": "^16.12.0",
     "semantic-release": "^15.13.21",
     "ts-jest": "^24.0.2",
     "typescript": "^3.5.3"
diff --git a/src/__snapshots__/index.test.tsx.snap b/src/__snapshots__/index.test.tsx.snap
index 10c4e2d..e9e8e2e 100644
--- a/src/__snapshots__/index.test.tsx.snap
+++ b/src/__snapshots__/index.test.tsx.snap
@@ -8,6 +8,60 @@ exports[`Serialization function serializes a JSON+LD script element with data se
 </script>
 `;
 
+exports[`Serialization function serializes a script element created using React.createElement 1`] = `
+<script
+  type="application/ld+json"
+>
+  Object {
+  "@context": "http://schema.org",
+  "@id": "https://example.dev/example_thing",
+  "@type": "Thing",
+}
+</script>
+`;
+
+exports[`Serialization function serializes a script element with data correctly 1`] = `
+<script
+  type="application/ld+json"
+>
+  Object {
+  "@context": "http://schema.org",
+  "@id": "https://example.dev/example_thing",
+  "@type": "Thing",
+}
+</script>
+`;
+
+exports[`Serialization function serializes a script element wrapped in a component 1`] = `
+<div>
+  <div>
+    <script
+      type="application/ld+json"
+    >
+      Object {
+      "@context": "http://schema.org",
+      "@id": "https://example.dev/example_thing",
+      "@type": "Thing",
+    }
+    </script>
+  </div>
+</div>
+`;
+
+exports[`Serialization function serializes a wrapped script element with data correctly 1`] = `
+<div>
+  <script
+    type="application/ld+json"
+  >
+    Object {
+    "@context": "http://schema.org",
+    "@id": "https://example.dev/example_thing",
+    "@type": "Thing",
+  }
+  </script>
+</div>
+`;
+
 exports[`Serialization module matches expectations 1`] = `
 Object {
   "print": [Function],
diff --git a/src/index.test.tsx b/src/index.test.tsx
index 1ed6a0e..6cb863d 100644
--- a/src/index.test.tsx
+++ b/src/index.test.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import renderer from "react-test-renderer";
 import serializer from ".";
 
 describe("Serializer test function", () => {
@@ -65,6 +66,87 @@ describe("Serialization function", () => {
 
     expect(ldScriptElement).toMatchSnapshot();
   });
+
+  it("serializes a script element with data correctly", () => {
+    expect.addSnapshotSerializer(serializer);
+
+    const element = (
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify({
+            "@context": "http://schema.org",
+            "@type": "Thing",
+            "@id": "https://example.dev/example_thing"
+          })
+        }}
+      />
+    );
+
+    expect(element).toMatchSnapshot();
+  });
+
+  it("serializes a wrapped script element with data correctly", () => {
+    expect.addSnapshotSerializer(serializer);
+
+    const element = (
+      <div>
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{
+            __html: JSON.stringify({
+              "@context": "http://schema.org",
+              "@type": "Thing",
+              "@id": "https://example.dev/example_thing"
+            })
+          }}
+        />
+      </div>
+    );
+
+    expect(element).toMatchSnapshot();
+  });
+
+  it("serializes a script element created using React.createElement", () => {
+    expect.addSnapshotSerializer(serializer);
+
+    const element = React.createElement("script", {
+      type: "application/ld+json",
+      dangerouslySetInnerHTML: {
+        __html: JSON.stringify({
+          "@context": "http://schema.org",
+          "@type": "Thing",
+          "@id": "https://example.dev/example_thing"
+        })
+      }
+    });
+
+    expect(element).toMatchSnapshot();
+  });
+
+  it("serializes a script element wrapped in a component", () => {
+    expect.addSnapshotSerializer(serializer);
+
+    const Component = () => (
+      <div>
+        <div>
+          <script
+            type="application/ld+json"
+            dangerouslySetInnerHTML={{
+              __html: JSON.stringify({
+                "@context": "http://schema.org",
+                "@type": "Thing",
+                "@id": "https://example.dev/example_thing"
+              })
+            }}
+          />
+        </div>
+      </div>
+    );
+
+    const tree = renderer.create(<Component />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });
 
 describe("Serialization module", () => {
diff --git a/src/index.tsx b/src/index.tsx
index a40daa5..9f50f84 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,22 +1,14 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
 import * as React from "react";
 
-function hasValidProps(val: any): boolean {
-  return Boolean(
-    val.props.dangerouslySetInnerHTML &&
-      val.props.type &&
-      val.props.type === "application/ld+json"
-  );
-}
-
 const JSONLDSerializer: jest.SnapshotSerializerPlugin = {
   test(val) {
     return Boolean(
       val &&
-        React.isValidElement(val) &&
+        // React.isValidElement(val) && // Previously we were using this API to shortcut testing if an object was a React object, but this produces false negatives on <script/> elements wrapped in Components. While it might take longer to fail on some tests, it should produce a negligable effect.
         val.type === "script" &&
-        hasValidProps(val)
+        val.props.dangerouslySetInnerHTML &&
+        val.props.type &&
+        val.props.type === "application/ld+json"
     );
   },
 
diff --git a/tsconfig.json b/tsconfig.json
index 6e81a4c..da7b451 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,9 +8,9 @@
     // "allowJs": true,                       /* Allow javascript files to be compiled. */
     // "checkJs": true,                       /* Report errors in .js files. */
     "jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
-    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
-    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
-    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
+    "declaration": true /* Generates corresponding '.d.ts' file. */,
+    "declarationMap": true /* Generates a sourcemap for each corresponding '.d.ts' file. */,
+    "sourceMap": true /* Generates corresponding '.map' file. */,
     // "outFile": "./",                       /* Concatenate and emit output to single file. */
     "outDir": "./dist" /* Redirect output structure to the directory. */,
     // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */