@salesforce/pwa-kit-react-sdk 3.0.0-preview.0

package/ssr/server/react-rendering.test.js

@@ -0,0 +1,708 @@
+"use strict";
+
+var _reactRendering = require("./react-rendering");
+var _crypto = require("crypto");
+var _buildRemoteServer = require("@salesforce/pwa-kit-runtime/ssr/server/build-remote-server");
+var _supertest = _interopRequireDefault(require("supertest"));
+var _nodeHtmlParser = require("node-html-parser");
+var _path = _interopRequireDefault(require("path"));
+var _ssrServer = require("@salesforce/pwa-kit-runtime/utils/ssr-server");
+var _compatibility = require("../universal/compatibility");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } /**
+                                                                                                                                                                                                                                                                                                                                                                                           * @jest-environment node
+                                                                                                                                                                                                                                                                                                                                                                                           */ /*
+                                                                                                                                                                                                                                                                                                                                                                                               * Copyright (c) 2023, Salesforce, Inc.
+                                                                                                                                                                                                                                                                                                                                                                                               * All rights reserved.
+                                                                                                                                                                                                                                                                                                                                                                                               * SPDX-License-Identifier: BSD-3-Clause
+                                                                                                                                                                                                                                                                                                                                                                                               * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
+                                                                                                                                                                                                                                                                                                                                                                                               */ // The @jest-environment comment block *MUST* be the first line of the file for the tests to pass.
+// That conflicts with the monorepo header rule, so we must disable the rule!
+/* eslint-disable header/header */
+const opts = (overrides = {}) => {
+  const fixtures = _path.default.join(__dirname, '..', '..', 'ssr', 'server', 'test_fixtures');
+  const defaults = {
+    buildDir: fixtures,
+    mobify: {
+      ssrEnabled: true,
+      ssrParameters: {
+        proxyConfigs: []
+      }
+    },
+    protocol: 'http'
+  };
+  return _objectSpread(_objectSpread({}, defaults), overrides);
+};
+jest.mock('../universal/compatibility', () => {
+  const AppConfig = jest.requireActual('../universal/components/_app-config').default;
+  const {
+    withReactQuery
+  } = jest.requireActual('../universal/components/with-react-query');
+  const {
+    withLegacyGetProps
+  } = jest.requireActual('../universal/components/with-legacy-get-props');
+  const appConfig = withReactQuery(withLegacyGetProps(AppConfig));
+  return {
+    getAppConfig: () => appConfig
+  };
+});
+jest.mock('../universal/routes', () => {
+  // TODO: Can these requires be converted to top-level imports?
+  /* eslint-disable @typescript-eslint/no-var-requires */
+  const React = require('react');
+  const PropTypes = require('prop-types');
+  const errors = require('../universal/errors');
+  const {
+    Redirect
+  } = require('react-router-dom');
+  const {
+    Helmet
+  } = require('react-helmet');
+  const {
+    useQuery
+  } = require('@tanstack/react-query');
+  const {
+    useServerContext
+  } = require('../universal/hooks');
+  /* eslint-enable @typescript-eslint/no-var-requires */
+
+  // Test utility to exercise paths that work with @loadable/component.
+  const fakeLoadable = Wrapped => {
+    class FakeLoadable extends React.Component {
+      static preload() {
+        return Promise.resolve(Wrapped);
+      }
+      render() {
+        return /*#__PURE__*/React.createElement(Wrapped, null);
+      }
+    }
+    return FakeLoadable;
+  };
+  class PWAPage extends React.Component {
+    static getProps() {
+      return Promise.resolve();
+    }
+    static getTemplateName() {
+      return 'templateName';
+    }
+    render() {
+      return /*#__PURE__*/React.createElement("div", null, "This is a PWA");
+    }
+  }
+  class UnknownErrorPage extends React.Component {
+    static getProps() {
+      throw new Error('This is an error');
+    }
+    render() {
+      return /*#__PURE__*/React.createElement("div", null, "This should not be rendered");
+    }
+  }
+  class ThrowStringErrorPage extends React.Component {
+    static getProps() {
+      throw 'This is an error';
+    }
+    render() {
+      return /*#__PURE__*/React.createElement("div", null, "This should not be rendered");
+    }
+  }
+  class KnownErrorPage extends React.Component {
+    static getProps() {
+      throw new errors.HTTPError(503, 'Service not available');
+    }
+    render() {
+      return /*#__PURE__*/React.createElement("div", null, "This should not be rendered");
+    }
+  }
+  class GetProps404ErrorPage extends React.Component {
+    static getProps() {
+      throw new errors.HTTPNotFound('Not found');
+    }
+    render() {
+      return /*#__PURE__*/React.createElement("div", null, "This should not be rendered");
+    }
+  }
+  class InitSetsStatusPage extends React.Component {
+    static getProps({
+      res
+    }) {
+      res.status(418);
+      return Promise.resolve();
+    }
+    render() {
+      return /*#__PURE__*/React.createElement("div", null, "418 - I am a Teapot");
+    }
+  }
+  class GetPropsRejectsWithEmptyString extends React.Component {
+    static getProps() {
+      return Promise.reject('');
+    }
+    render() {
+      return /*#__PURE__*/React.createElement("div", null, "This should not be rendered");
+    }
+  }
+  class RenderThrowsError extends React.Component {
+    static getProps() {
+      return Promise.resolve();
+    }
+    // eslint-disable-next-line react/require-render-return
+    render() {
+      throw new Error('This is an error rendering');
+    }
+  }
+  class GetPropsReturnsObject extends React.Component {
+    static getProps() {
+      return {
+        prop: 'prop-value'
+      };
+    }
+    render() {
+      return /*#__PURE__*/React.createElement("div", null, this.props.prop);
+    }
+  }
+  class RedirectPage extends React.Component {
+    static getProps() {
+      return Promise.resolve();
+    }
+    render() {
+      return /*#__PURE__*/React.createElement(Redirect, {
+        to: "/elsewhere/"
+      });
+    }
+  }
+  class HelmetPage extends React.Component {
+    static getProps() {
+      return Promise.resolve();
+    }
+    static getTemplateName() {
+      return 'templateName';
+    }
+    render() {
+      return /*#__PURE__*/React.createElement(Helmet, null, /*#__PURE__*/React.createElement("html", {
+        lang: "helmet-html-attribute"
+      }), /*#__PURE__*/React.createElement("body", {
+        className: "helmet-body-attribute"
+      }), /*#__PURE__*/React.createElement("title", null, "Helmet title"), /*#__PURE__*/React.createElement("base", {
+        target: "_blank",
+        href: "http://mysite.com/"
+      }), /*#__PURE__*/React.createElement("meta", {
+        name: "helmet-meta-1",
+        content: "helmet-meta-1"
+      }), /*#__PURE__*/React.createElement("meta", {
+        property: "helmet-meta-2",
+        content: "helmet-meta-2"
+      }), /*#__PURE__*/React.createElement("link", {
+        rel: "helmet-link-1",
+        href: "http://mysite.com/example"
+      }), /*#__PURE__*/React.createElement("link", {
+        rel: "helmet-link-2",
+        href: "http://mysite.com/img/apple-touch-icon-57x57.png"
+      }), /*#__PURE__*/React.createElement("script", {
+        src: "http://include.com/pathtojs.js",
+        type: "text/javascript"
+      }), /*#__PURE__*/React.createElement("script", {
+        type: "application/ld+json"
+      }, `
+                        {
+                            "@context": "http://schema.org"
+                        }
+                    `), /*#__PURE__*/React.createElement("noscript", null, `
+                        <link rel="stylesheet" type="text/css" href="foo.css" />
+                    `), /*#__PURE__*/React.createElement("style", {
+        type: "text/css"
+      }, `
+                        body {
+                            background-color: blue;
+                        }
+                    `));
+    }
+  }
+  class XSSPage extends React.Component {
+    static getProps() {
+      return {
+        prop: '<script>alert("hey! give me your money")</script>'
+      };
+    }
+    render() {
+      return /*#__PURE__*/React.createElement("div", null, "XSS attack");
+    }
+  }
+  const UseQueryResolvesObject = () => {
+    const {
+      data,
+      isLoading
+    } = useQuery(['use-query-resolves-object'], /*#__PURE__*/_asyncToGenerator(function* () {
+      return {
+        prop: 'prop-value'
+      };
+    }));
+    return /*#__PURE__*/React.createElement("div", null, isLoading ? 'loading' : data.prop);
+  };
+  const DisabledUseQueryIsntResolved = () => {
+    const {
+      data,
+      isLoading
+    } = useQuery(['use-query-resolves-object'], /*#__PURE__*/_asyncToGenerator(function* () {
+      return {
+        prop: 'prop-value'
+      };
+    }), {
+      enabled: false
+    });
+    return /*#__PURE__*/React.createElement("div", null, isLoading ? 'loading' : data.prop);
+  };
+  const GetServerContext = () => {
+    const {
+      res
+    } = useServerContext();
+    if (res) {
+      console.log('--- isServerSide');
+      res.status(404);
+    }
+    return /*#__PURE__*/React.createElement("div", null);
+  };
+  GetPropsReturnsObject.propTypes = {
+    prop: PropTypes.node
+  };
+  return {
+    __esModule: true,
+    default: [{
+      path: '/pwa/',
+      component: fakeLoadable(PWAPage)
+    }, {
+      path: '/unknown-error/',
+      component: UnknownErrorPage
+    }, {
+      path: '/throw-string/',
+      component: ThrowStringErrorPage
+    }, {
+      path: '/known-error/',
+      component: KnownErrorPage
+    }, {
+      path: '/404-in-get-props-error/',
+      component: GetProps404ErrorPage
+    }, {
+      path: '/redirect/',
+      component: RedirectPage
+    }, {
+      path: '/init-sets-status/',
+      component: InitSetsStatusPage
+    }, {
+      path: '/get-props-returns-object/',
+      component: GetPropsReturnsObject
+    }, {
+      path: '/get-props-rejects-with-empty-string/',
+      component: GetPropsRejectsWithEmptyString
+    }, {
+      path: '/render-throws-error/',
+      component: RenderThrowsError
+    }, {
+      path: '/render-helmet/',
+      component: fakeLoadable(HelmetPage)
+    }, {
+      path: '/xss/',
+      component: XSSPage
+    }, {
+      path: '/use-query-resolves-object/',
+      component: UseQueryResolvesObject
+    }, {
+      path: '/disabled-use-query-isnt-resolved/',
+      component: DisabledUseQueryIsntResolved
+    }, {
+      path: '/server-context',
+      component: GetServerContext
+    }]
+  };
+});
+jest.mock('@salesforce/pwa-kit-runtime/utils/ssr-server', () => {
+  const actual = jest.requireActual('@salesforce/pwa-kit-runtime/utils/ssr-server');
+  return _objectSpread(_objectSpread({}, actual), {}, {
+    isRemote: jest.fn()
+  });
+});
+jest.mock('@loadable/server', () => {
+  const lodableServer = jest.requireActual('@loadable/server');
+  return _objectSpread(_objectSpread({}, lodableServer), {}, {
+    // Tests aren't being run through webpack, therefore no chunks or `loadable-stats.json`
+    // file is being created. ChunkExtractor causes a file read exception. For this
+    // reason, we mock the implementation to do nothing.
+    ChunkExtractor: function () {
+      return {
+        collectChunks: jest.fn().mockImplementation(x => x),
+        getScriptElements: jest.fn().mockReturnValue([])
+      };
+    }
+  });
+});
+jest.mock('@salesforce/pwa-kit-runtime/ssr/server/build-remote-server', () => {
+  const actual = jest.requireActual('@salesforce/pwa-kit-runtime/ssr/server/build-remote-server');
+  return _objectSpread(_objectSpread({}, actual), {}, {
+    RemoteServerFactory: _objectSpread(_objectSpread({}, actual.RemoteServerFactory), {}, {
+      _setRequestId: jest.fn()
+    })
+  });
+});
+describe('The Node SSR Environment', () => {
+  const OLD_ENV = process.env;
+  beforeAll(() => {
+    // These values are not allowed to be `undefined` when `isRemote` returns true. So we mock them.
+    process.env.BUNDLE_ID = '1';
+    process.env.DEPLOY_TARGET = 'production';
+    process.env.EXTERNAL_DOMAIN_NAME = 'test.com';
+    process.env.MOBIFY_PROPERTY_ID = 'test';
+  });
+  afterAll(() => {
+    process.env = OLD_ENV; // Restore old environment
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  /**
+   * Scripts are "safe" if they are external, not executable or on our allow list of
+   * static, inline scripts.
+   */
+  const scriptsAreSafe = doc => {
+    const scripts = Array.from(doc.querySelectorAll('script'));
+    expect(scripts.length > 0).toBe(true);
+    return scripts.every(script => {
+      const external = script.hasAttribute('src');
+      const executable = !script.hasAttribute('type') || script.getAttribute('type') === 'application/javascript';
+      const allowlisted = _reactRendering.ALLOWLISTED_INLINE_SCRIPTS.indexOf(script.innerHTML) >= 0;
+      return external || !executable || allowlisted;
+    });
+  };
+  const dataFromHTML = doc => JSON.parse(doc.querySelector('#mobify-data').innerHTML);
+  const cases = [{
+    description: `rendering PWA's for desktop`,
+    req: {
+      url: '/pwa/'
+    },
+    assertions: res => {
+      expect(res.statusCode).toBe(200);
+      const html = res.text;
+      console.error(html);
+      const doc = (0, _nodeHtmlParser.parse)(html);
+      const include = ['<div>This is a PWA</div>'];
+      const dataScript = doc.querySelectorAll('script[id=mobify-data]')[0];
+      expect(dataScript.innerHTML.split(/\r\n|\r|\n/)).toHaveLength(1);
+      include.forEach(s => expect(html).toEqual(expect.stringContaining(s)));
+      expect(scriptsAreSafe(doc)).toBe(true);
+    }
+  }, {
+    description: `rendering PWA's for tablet`,
+    req: {
+      url: '/pwa/'
+    },
+    assertions: res => {
+      expect(res.statusCode).toBe(200);
+      const html = res.text;
+      const doc = (0, _nodeHtmlParser.parse)(html);
+      const include = ['<div>This is a PWA</div>'];
+      include.forEach(s => expect(html).toEqual(expect.stringContaining(s)));
+      expect(scriptsAreSafe(doc)).toBe(true);
+    }
+  }, {
+    description: `rendering PWA's for mobile`,
+    req: {
+      url: '/pwa/'
+    },
+    assertions: res => {
+      expect(res.statusCode).toBe(200);
+      const html = res.text;
+      const doc = (0, _nodeHtmlParser.parse)(html);
+      const include = ['<div>This is a PWA</div>'];
+      include.forEach(s => expect(html).toEqual(expect.stringContaining(s)));
+      expect(scriptsAreSafe(doc)).toBe(true);
+    }
+  }, {
+    description: `rendering PWA's in "mobify-server-only" mode should not execute scripts on the client`,
+    req: {
+      url: '/pwa/',
+      query: {
+        mobify_server_only: '1'
+      }
+    },
+    assertions: res => {
+      const html = res.text;
+      const doc = (0, _nodeHtmlParser.parse)(html);
+      const include = ['<div>This is a PWA</div>'];
+      include.forEach(s => expect(html).toEqual(expect.stringContaining(s)));
+      doc.querySelectorAll('script').forEach(script => {
+        // application/json prevents execution!
+        expect(script.getAttribute('type')).toBe('application/json');
+      });
+    }
+  }, {
+    description: `rendering PWA's in "__server-only" mode should not execute scripts on the client`,
+    req: {
+      url: '/pwa/',
+      query: {
+        __server_only: '1'
+      }
+    },
+    assertions: res => {
+      const html = res.text;
+      const doc = (0, _nodeHtmlParser.parse)(html);
+      const include = ['<div>This is a PWA</div>'];
+      include.forEach(s => expect(html).toEqual(expect.stringContaining(s)));
+      doc.querySelectorAll('script').forEach(script => {
+        // application/json prevents execution!
+        expect(script.getAttribute('type')).toBe('application/json');
+      });
+    }
+  }, {
+    description: `rendering PWA's with legacy "mobify_pretty" mode should print stylized global state`,
+    req: {
+      url: '/pwa/',
+      query: {
+        mobify_pretty: '1'
+      }
+    },
+    assertions: res => {
+      const html = res.text;
+      const doc = (0, _nodeHtmlParser.parse)(html);
+      const include = ['<div>This is a PWA</div>'];
+      include.forEach(s => expect(html).toEqual(expect.stringContaining(s)));
+      const script = doc.querySelectorAll('script[id=mobify-data]')[0];
+      expect(script.innerHTML.split(/\r\n|\r|\n/).length).toBeGreaterThan(1);
+    }
+  }, {
+    description: `rendering PWA's with  "__pretty_print" mode should print stylized global state`,
+    req: {
+      url: '/pwa/',
+      query: {
+        __pretty_print: '1'
+      }
+    },
+    assertions: res => {
+      const html = res.text;
+      const doc = (0, _nodeHtmlParser.parse)(html);
+      const include = ['<div>This is a PWA</div>'];
+      include.forEach(s => expect(html).toEqual(expect.stringContaining(s)));
+      const script = doc.querySelectorAll('script[id=mobify-data]')[0];
+      expect(script.innerHTML.split(/\r\n|\r|\n/).length).toBeGreaterThan(1);
+    }
+  }, {
+    description: `404 when no route matches`,
+    req: {
+      url: '/this-should-404/'
+    },
+    assertions: res => {
+      expect(res.statusCode).toBe(404);
+    }
+  }, {
+    description: `404 when getProps method throws a 404`,
+    req: {
+      url: '/404-in-get-props-error/'
+    },
+    assertions: res => {
+      expect(res.statusCode).toBe(404);
+    }
+  }, {
+    description: `supports react-routers redirect mechanism`,
+    req: {
+      url: '/redirect/'
+    },
+    assertions: res => {
+      expect(res.statusCode).toBe(302);
+    }
+  }, {
+    description: `500 on unknown errors in getProps`,
+    req: {
+      url: '/unknown-error/'
+    },
+    assertions: res => {
+      expect(res.statusCode).toBe(500);
+    }
+  }, {
+    description: `500 when string (not Error) thrown in getProps`,
+    req: {
+      url: '/throw-string/'
+    },
+    assertions: res => {
+      expect(res.statusCode).toBe(500);
+    }
+  }, {
+    description: `5XX on known HTTP errors in getProps`,
+    req: {
+      url: '/known-error/'
+    },
+    assertions: res => {
+      expect(res.statusCode).toBe(503);
+    }
+  }, {
+    description: `Respects HTTP status codes set in init() methods`,
+    req: {
+      url: '/init-sets-status/'
+    },
+    assertions: res => {
+      expect(res.statusCode).toBe(418);
+    }
+  }, {
+    description: `Works if the user returns an Object of props, instead of a Promise`,
+    req: {
+      url: '/get-props-returns-object/'
+    },
+    assertions: res => {
+      expect(res.statusCode).toBe(200);
+      const html = res.text;
+      const include = ['<div>prop-value</div>'];
+      include.forEach(s => expect(html).toEqual(expect.stringContaining(s)));
+    }
+  }, {
+    description: `Renders the error page if getProps rejects with an empty string`,
+    req: {
+      url: '/get-props-rejects-with-empty-string/'
+    },
+    assertions: res => {
+      const html = res.text;
+      const doc = (0, _nodeHtmlParser.parse)(html);
+      const data = dataFromHTML(doc);
+      expect(data.__ERROR__.message).toBe('Internal Server Error');
+      expect(typeof data.__ERROR__.stack).toEqual((0, _ssrServer.isRemote)() ? 'undefined' : 'string');
+      expect(data.__ERROR__.status).toBe(500);
+    }
+  }, {
+    description: `Renders the error page instead if there is an error during component rendering`,
+    req: {
+      url: '/render-throws-error/'
+    },
+    assertions: res => {
+      const html = res.text;
+      const doc = (0, _nodeHtmlParser.parse)(html);
+      const data = dataFromHTML(doc);
+      expect(data.__ERROR__.message).toBe('Internal Server Error');
+      expect(typeof data.__ERROR__.stack).toEqual((0, _ssrServer.isRemote)() ? 'undefined' : 'string');
+      expect(data.__ERROR__.status).toBe(500);
+      expect(res.statusCode).toBe(500);
+    }
+  }, {
+    description: `Renders react-helmet tags`,
+    req: {
+      url: '/render-helmet/'
+    },
+    assertions: res => {
+      expect(res.statusCode).toBe(200);
+      const html = res.text;
+      const doc = (0, _nodeHtmlParser.parse)(html);
+      const head = doc.querySelector('head');
+      expect(html).toContain('lang="helmet-html-attribute"');
+      expect(doc.querySelector('body').getAttribute('class')).toBe('helmet-body-attribute');
+      expect(head.querySelector(`title`).innerHTML).toBe('Helmet title');
+      expect(head.querySelector('base').getAttribute('target')).toBe('_blank');
+      expect(doc.querySelector('style').innerHTML).toContain('background-color: blue;');
+      expect(doc.querySelector('noscript').innerHTML).toContain('<link rel="stylesheet" type="text/css" href="foo.css" />');
+      expect(doc.querySelector('noscript').innerHTML).toEqual(expect.stringContaining('<link rel="stylesheet" type="text/css" href="foo.css" />'));
+      expect(head.querySelector('meta[name="helmet-meta-1"]')).not.toBeNull();
+      expect(head.querySelector('meta[property="helmet-meta-2"]')).not.toBeNull();
+      expect(head.querySelector('link[rel="helmet-link-1"]')).not.toBeNull();
+      expect(head.querySelector('link[rel="helmet-link-2"]')).not.toBeNull();
+      expect(head.querySelector('script[src="http://include.com/pathtojs.js"]')).not.toBeNull();
+      expect(head.querySelector('script[type="application/ld+json"]').innerHTML).toContain(`"@context": "http://schema.org"`);
+    }
+  }, {
+    description: `Frozen state is escaped preventing injection attacks`,
+    req: {
+      url: '/xss/'
+    },
+    assertions: res => {
+      const html = res.text;
+      const doc = (0, _nodeHtmlParser.parse)(html);
+      const scriptContent = doc.querySelector('#mobify-data').innerHTML;
+      expect(scriptContent).not.toContain('<script>');
+    }
+  }, {
+    description: `AppConfig errors are caught`,
+    req: {
+      url: '/pwa/'
+    },
+    mocks: () => {
+      const AppConfig = (0, _compatibility.getAppConfig)();
+      jest.spyOn(AppConfig.prototype, 'render').mockImplementation(() => {
+        throw new Error();
+      });
+    },
+    assertions: res => {
+      const html = res.text;
+      expect(res.statusCode).toBe(500);
+      const shouldIncludeErrorStack = !(0, _ssrServer.isRemote)();
+      expect(html).toContain(shouldIncludeErrorStack ? 'Error: ' : 'Internal Server Error');
+    }
+  }, {
+    description: `Works if the user resolves an Object with useQuery`,
+    req: {
+      url: '/use-query-resolves-object/'
+    },
+    assertions: res => {
+      expect(res.statusCode).toBe(200);
+      const html = res.text;
+      expect(html).toEqual(expect.stringContaining('<div>prop-value</div>'));
+    }
+  }, {
+    description: `Disabled useQuery queries aren't run on the server`,
+    req: {
+      url: '/disabled-use-query-isnt-resolved/'
+    },
+    assertions: res => {
+      expect(res.statusCode).toBe(200);
+      const html = res.text;
+      expect(html).toEqual(expect.stringContaining('<div>loading</div>'));
+    }
+  }, {
+    description: 'Get the server context and set the response status to 404',
+    req: {
+      url: '/server-context'
+    },
+    mocks: () => {
+      jest.spyOn(console, 'log');
+    },
+    assertions: res => {
+      expect(res.statusCode).toBe(404);
+
+      // we'll expect that this method is called three times,
+      // twice for rendering pipeline because of the prepass step and one for http request logging
+      expect(console.log).toHaveBeenCalledTimes(3);
+    }
+  }];
+  const isRemoteValues = [true, false];
+  _buildRemoteServer.RemoteServerFactory._setRequestId.mockImplementation(_app => {
+    _app.use((req, res, next) => {
+      res.locals.requestId = (0, _crypto.randomUUID)();
+      next();
+    });
+  });
+  isRemoteValues.forEach(isRemoteValue => {
+    // Rename `assertions` to `expectations` to pass linter rule
+    cases.forEach(({
+      description,
+      req,
+      assertions: expectations,
+      mocks
+    }) => {
+      test(`renders PWA pages properly when ${isRemoteValue ? 'remote' : 'local'} (${description})`, /*#__PURE__*/_asyncToGenerator(function* () {
+        // Mock `isRemote` per test execution.
+        _ssrServer.isRemote.mockReturnValue(isRemoteValue);
+        process.env.NODE_ENV = isRemoteValue ? 'production' : 'development';
+        const {
+          url,
+          headers,
+          query
+        } = req;
+        const app = _buildRemoteServer.RemoteServerFactory._createApp(opts());
+        app.get('/*', _reactRendering.render);
+        if (mocks) {
+          mocks();
+        }
+        const res = yield (0, _supertest.default)(app).get(url).set(headers || {}).query(query || {});
+        expectations(res);
+      }));
+    });
+  });
+});