test: add logger utils

@remirror/react/src/components/__tests__/providers-server.spec.tsx

@@ -27,7 +27,6 @@ test('RemirrorProvider', () => {
 test('ManagedRemirrorProvider', () => {
   // global.render = renderToStaticMarkup;
   const TestComponent = () => {
-    console.log('loaded HOC');
     const { getRootProps } = useRemirror();
     const rootProps = getRootProps();
     return (
@@ -44,6 +43,5 @@ test('ManagedRemirrorProvider', () => {
       </ManagedRemirrorProvider>
     </RemirrorManager>,
   );
-  console.log(reactString);
   expect(reactString).toInclude('basic');
 });

@remirror/react/src/components/__tests__/providers.spec.tsx

@@ -10,7 +10,6 @@ import { RemirrorManager } from '../remirror-manager';
 
 describe('ManagedRemirrorProvider', () => {
   const TestComponent: FC = () => {
-    console.log('loading HOC');
     const { getRootProps } = useRemirror();
     return (
       <div>

package.json

@@ -90,6 +90,7 @@
     "@storybook/addon-links": "5.1.3",
     "@storybook/addons": "5.1.3",
     "@storybook/react": "5.1.3",
+    "@testing-library/dom": "^5.2.0",
     "@testing-library/react": "8.0.1",
     "@types/enzyme": "3.9.3",
     "@types/enzyme-adapter-react-16": "1.0.5",
@@ -128,6 +129,7 @@
     "eslint-plugin-promise": "4.1.1",
     "eslint-plugin-standard": "4.0.0",
     "execa": "1.0.0",
+    "htm": "^2.1.1",
     "husky": "2.4.1",
     "jest": "24.8.0",
     "jest-axe": "3.1.0",
@@ -153,6 +155,7 @@
     "npm-run-all": "4.1.5",
     "prettier": "1.18.2",
     "prettier-package-json": "2.1.0",
+    "pretty-format": "^24.8.0",
     "prosemirror-test-builder": "1.0.1",
     "ps-tree": "1.2.0",
     "puppeteer": "1.17.0",

support/fixtures/utils.ts

@@ -0,0 +1,48 @@
+import prettyFormat from 'pretty-format';
+import { html } from 'htm/react';
+import { prettyDOM } from '@testing-library/dom';
+const { ReactElement } = prettyFormat.plugins;
+
+/**
+ * Format a react element for printing to the dom
+ */
+const format = (element: JSX.Element) =>
+  prettyFormat(element, {
+    plugins: [ReactElement],
+    printFunctionName: false,
+    highlight: true,
+  });
+
+/**
+ * Log a pretty html string
+ *
+ * @param html - the string to print
+ */
+export const logHtml = (str: string) => {
+  console.log(
+    html`
+      <div>${str}</div>
+    `,
+  );
+  console.log(
+    format(
+      html`
+        ${str}
+      `,
+    ),
+  );
+};
+
+/**
+ * Log an element in a pretty way within the dom
+ *
+ * @param element - the element to print
+ */
+export const logElement = (element: Node) => console.log(prettyDOM(element as HTMLElement));
+
+/**
+ * Log JSX in a pretty way
+ *
+ * @param jsx - the jsx to print
+ */
+export const logJSX = (jsx: JSX.Element) => console.log(format(jsx));

yarn.lock

@@ -2955,7 +2955,7 @@
     "@svgr/plugin-svgo" "^4.2.0"
     loader-utils "^1.2.3"
 
-"@testing-library/dom@^5.0.0":
+"@testing-library/dom@^5.0.0", "@testing-library/dom@^5.2.0":
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-5.2.0.tgz#450bd09f93ddd8865eec98fc5e81fceb2bccdf9c"
   integrity sha512-nFaZes/bzDfMqwZpQXdiPyj3WXU16FYf5k5NCFu/qJM4JdRJLHEtSRYtrETmk7nCf+qLVoHCqRduGi/4KE83Gw==
@@ -9918,6 +9918,11 @@ hpack.js@^2.1.6:
     readable-stream "^2.0.1"
     wbuf "^1.1.0"
 
+htm@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/htm/-/htm-2.1.1.tgz#5a53e5f2845c3181b1672f95c9bffaf3d621bb0e"
+  integrity sha512-jgvB9nvlOE5xpI1W+juW8DPCe+Pn7mRDNaE4EOQNFqROm0O3l5deOvefK8C8hUaL1OHIX45mDEBSj7BMt+22VQ==
+
 html-element-map@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/html-element-map/-/html-element-map-1.0.1.tgz#3c4fcb4874ebddfe4283b51c8994e7713782b592"