Merge pull request #105 from Nosto/recommendationComponent-validation

Add validation for recommendationComponent

spec/nosto.load.spec.tsx

@@ -27,6 +27,26 @@ describe("Nosto client script loading", () => {
     expect(document.querySelector("[nosto-client-script]")).toBeInTheDocument()
   })
 
+  it("throws error on invalid recommendationComponent", () => {
+    expect(() => {
+      render(
+        <NostoProvider account="shopify-11368366139" recommendationComponent={true as unknown as React.ReactElement}>
+          <NostoHome />
+        </NostoProvider>
+      )
+    }).toThrowError()
+  })
+
+  it("access valid React elements in recommendationComponent", () => {
+    render(
+      <NostoProvider account="shopify-11368366139" recommendationComponent={<NostoHome />}>
+        <NostoHome />
+      </NostoProvider>
+    )
+
+    expect(document.querySelector("[nosto-client-script]")).toBeInTheDocument()
+  })
+
   it("Shopify markets script", () => {
     render(
       <NostoProvider account="shopify-11368366139" shopifyMarkets={{ language: "en", marketId: "123" }}>

src/components/NostoProvider.tsx

@@ -72,8 +72,14 @@ export default function NostoProvider(props: NostoProviderProps) {
   // Pass currentVariation as empty string if multiCurrency is disabled
   const currentVariation = multiCurrency ? props.currentVariation : ""
 
+  if (recommendationComponent && !isValidElement(recommendationComponent)) {
+    throw new Error(
+      "The recommendationComponent prop must be a valid React element. Please provide a valid React element."
+    )
+  }
+
   // Set responseMode for loading campaigns:
-  const responseMode = isValidElement(recommendationComponent) ? "JSON_ORIGINAL" : "HTML"
+  const responseMode = recommendationComponent ? "JSON_ORIGINAL" : "HTML"
 
   const { clientScriptLoaded } = useLoadClientScript(props)