add test with rendering for react-query (#1792)

packages/xarc-react-query/package.json

@@ -90,7 +90,8 @@
       "gulpfile.js",
       "test",
       "xrun*.js",
-      "xrun*.ts"
+      "xrun*.ts",
+      ".eslintrc.js"
     ],
     "check-coverage": false,
     "statements": 100,

packages/xarc-react-query/src/common/index.ts

@@ -50,6 +50,19 @@ export type ReactQueryFeatureOptions = {
    *
    * Your module will be loaded and executed on the server only and will not be bundled for the
    * client, and it can use any node.js APIs.
+   *
+   * A typical `prefetchQuery` may look like this:
+   *
+   * ```js
+   * export const prefetchQuery = async ({ queryClient, ssrData }) => {
+   *   await queryClient.prefetchQuery("test", testFetch);
+   *   const dehydratedState = dehydrate(queryClient);
+   *   queryClient.resetQueries();
+   *   return { queryClient, dehydratedState };
+   * };
+   * ```
+   *
+   * .
    */
   serverModule?: string;
 

packages/xarc-react-query/test/prefetch.ts

@@ -0,0 +1,12 @@
+import { dehydrate } from "react-query/hydration";
+
+export const testFetch = async ({ queryKey }) => {
+  return { msg: "foo", queryKey };
+};
+
+export const prefetchQuery = async ({ queryClient }) => {
+  await queryClient.prefetchQuery("test", testFetch);
+  const dehydratedState = dehydrate(queryClient);
+  queryClient.resetQueries();
+  return { queryClient, dehydratedState };
+};

packages/xarc-react-query/test/spec/browser-index.spec.ts

@@ -1,3 +1,4 @@
+/* eslint-disable prefer-arrow-callback */
 //
 import { reactQueryFeature } from "../../src/browser/index";
 import { describe, it } from "mocha";
@@ -6,7 +7,7 @@ import React from "react";
 import { SubAppDef, envHooks } from "@xarc/subapp";
 import { SubAppContainer } from "@xarc/subapp";
 
-describe("reactQueryFeature", function () {
+describe("reactQueryFeature browser", function () {
   it("should return a feature factory", async () => {
     const factory = reactQueryFeature({ React });
     expect(factory.id).equal("state-provider");

packages/xarc-react-query/test/spec/node-index.spec.tsx

@@ -0,0 +1,76 @@
+/* eslint-disable prefer-arrow-callback */
+import React from "react"; // eslint-disable-line
+//
+import { reactQueryFeature } from "../../src/node/index";
+import { describe, it } from "mocha";
+import { expect } from "chai";
+import { renderToString } from "react-dom/server";
+import { SubAppDef, envHooks } from "@xarc/subapp";
+import { SubAppContainer } from "@xarc/subapp";
+import { useQuery } from "react-query";
+import { testFetch } from "../prefetch";
+
+const { createElement } = React; // eslint-disable-line
+
+describe("reactQueryFeature node.js", function () {
+  it("should return a feature factory", async () => {
+    const factory = reactQueryFeature({ React });
+    expect(factory.id).equal("state-provider");
+    expect(factory.subId).equal("react-query");
+    expect(factory.add).to.be.a("function");
+  });
+
+  it("should add react-query feature to a subapp", async () => {
+    const container = new SubAppContainer({});
+    envHooks.getContainer = () => container;
+    const factory = reactQueryFeature({ React });
+    const def = {
+      name: "test",
+      getModule() {
+        return Promise.resolve({});
+      },
+      _features: {}
+    } as SubAppDef;
+    container.declare("test", def);
+
+    factory.add(def);
+    expect(def._features.reactQuery).to.be.an("object");
+  });
+
+  it("should render subapp with react-query", async () => {
+    const container = new SubAppContainer({});
+
+    envHooks.getContainer = () => container;
+
+    const factory = reactQueryFeature({
+      React,
+      serverModule: require.resolve("../prefetch")
+    });
+
+    const def = {
+      name: "test",
+      getModule() {
+        return Promise.resolve({});
+      },
+      _features: {}
+    } as SubAppDef;
+
+    container.declare("test", def);
+
+    factory.add(def);
+    const result = await def._features.reactQuery.execute({
+      input: {
+        Component: () => {
+          const { data } = useQuery("test", testFetch);
+          return <div>test {JSON.stringify(data)}</div>;
+        }
+      }
+    });
+
+    const str = renderToString(<result.Component />);
+
+    expect(str).equals(
+      `<div>test <!-- -->{&quot;msg&quot;:&quot;foo&quot;,&quot;queryKey&quot;:[&quot;test&quot;]}</div>`
+    );
+  });
+});