0.0.4

.size-snapshot.json

@@ -1,18 +1,18 @@
 {
   "dist/react-fiber-traverse.cjs.development.js": {
-    "bundled": 9674,
+    "bundled": 7398,
-    "minified": 4533,
+    "minified": 3036,
-    "gzipped": 1335
+    "gzipped": 967
   },
   "dist/react-fiber-traverse.cjs.production.js": {
-    "bundled": 9674,
+    "bundled": 7398,
-    "minified": 4533,
+    "minified": 3036,
-    "gzipped": 1335
+    "gzipped": 967
   },
   "dist/react-fiber-traverse.esm.js": {
-    "bundled": 9312,
+    "bundled": 7048,
-    "minified": 4229,
+    "minified": 2736,
-    "gzipped": 1245,
+    "gzipped": 869,
     "treeshaked": {
       "rollup": {
         "code": 49,
@@ -24,13 +24,13 @@
     }
   },
   "dist/react-fiber-traverse.umd.development.js": {
-    "bundled": 34862,
+    "bundled": 32560,
-    "minified": 9669,
+    "minified": 8698,
-    "gzipped": 3394
+    "gzipped": 3085
   },
   "dist/react-fiber-traverse.umd.production.js": {
-    "bundled": 34862,
+    "bundled": 32560,
-    "minified": 9669,
+    "minified": 8698,
-    "gzipped": 3394
+    "gzipped": 3085
   }
 }

README.md

@@ -12,12 +12,13 @@
 ```ts
 import { render } from 'react-dom'
 
-import { findNodeByComponentName, Utils } from 'react-fiber-traverse'
+import { findNodeByComponentName } from 'react-fiber-traverse'
+import { getRootFiberNodeFromDOM } from 'react-fiber-traverse/utils'
 
 const rootElement = document.getElementById('root');
 render(<App>, 'root');
 
-const rootFiberNode = Utils.getRootFiberNodeFromDOM(rootElement);
+const rootFiberNode = getRootFiberNodeFromDOM(rootElement);
 
 const someFiberNode = findNodeByComponentName(rootFiberNode, 'SomeComponentName'); // <- returns FiberNode for first usage of 'SomeComponentName'
 // Say, if SomeComponentName renders (<div>Some text</div>)

TODO.md

@@ -1,16 +1,16 @@
-# TODOs
-
 1. Write docs and examples
 2. Reduce testcase boilerplate code for similar tests
 3. Publish to npm
 4. Build some demo
 
-5. Add `findAllNodes` helpers which searches all usages of the components - by name or class
+5. Pack separate files
 
-6. Fix getRootFiberNodeFromDOM and related helpers -
+Affected parts
-   - .\_internalRoot is not present is 16.0.0 but present in 16.9.0
+---------------
-   - actual node is available 2 levels nested inside this root node
+a. Rollup config (input and output) X
-   - add testcase to run across all versions of React 16.0.0 (dev+prod) and above (because internals change)
+b. package.json entrypoints X
+c. root index.js for dynamic prod or dev redirection X
+d. change unpkg links in readme
+e. separate folder for types ?? (change tsconfig)
 
-7. Make it work with older React versions
+f. Enable umd build from one index file
-8. Make it work with non React-DOM renderers

index.js

@@ -1,7 +1,7 @@
 "use strict";
 
 if (process.env.NODE_ENV === "production") {
-  module.exports = require("./react-fiber-traverse.cjs.production.js");
+  module.exports = require("./cjs-production/index.js");
 } else {
-  module.exports = require("./react-fiber-traverse.cjs.development.js");
+  module.exports = require("./cjs-development/index.js");
 }

lint-staged.config.js

@@ -1,12 +1,3 @@
 module.exports = {
-  "*.{js,jsx,ts,tsx}": filenames => {
+  "*.{js,jsx,ts,tsx}": () => "run-s check:* lint"
-    // Escape filenames and join by space
-    const joinedFilenames = filenames.map(str => `"${str}"`).join(" ");
-    return [
-      "run-s check:!(format)",
-      `npm run check:format -- ${joinedFilenames}`,
-      `npm run _lint -- ${joinedFilenames}`
-    ];
-    // `run-s check:!(format) "check:format -- ${joinedFilenames}" "_lint -- ${joinedFilenames}"`;
-  }
 };

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-fiber-traverse",
-  "version": "0.0.5",
+  "version": "0.0.4",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -10547,6 +10547,25 @@
         }
       }
     },
+    "rollup-plugin-multi-input": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-multi-input/-/rollup-plugin-multi-input-1.0.2.tgz",
+      "integrity": "sha512-ktLat6+lrvT3Z3kVrUr/Fy3+5xaj/sIfNpBfDQO2P6sd3lAGPI+yi2Dj+fxxkVubIpRocN0Z4jPkN+c28uJimA==",
+      "dev": true,
+      "requires": {
+        "core-js": "^3.1.3",
+        "fast-glob": "^3.0.0",
+        "lodash": "^4.17.11"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "3.1.4",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.1.4.tgz",
+          "integrity": "sha512-YNZN8lt82XIMLnLirj9MhKDFZHalwzzrL9YLt6eb0T5D0EDl4IQ90IGkua8mHbnxNrkj1d8hbdizMc0Qmg1WnQ==",
+          "dev": true
+        }
+      }
+    },
     "rollup-plugin-node-resolve": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-5.2.0.tgz",

package.json

@@ -1,10 +1,10 @@
 {
   "name": "react-fiber-traverse",
-  "version": "0.0.5",
+  "version": "0.0.4",
   "description": "Traverse and other utils on top of React fiber tree",
   "main": "dist/index.js",
-  "module": "dist/react-fiber-traverse.esm.js",
+  "module": "dist/esm/index.js",
-  "jsnext:main": "dist/react-fiber-traverse.esm.js",
+  "jsnext:main": "dist/esm/index.js",
   "typings": "dist/index.d.ts",
   "files": [
     "dist"
@@ -24,8 +24,7 @@
     "compile": "tsc -p tsconfig.base.json",
     "docs": "npx typedoc ./src/",
     "format": "prettier --write \"**/*.{js,ts,tsx}\"",
-    "_lint": "eslint --ext .js,.ts,.jsx,.tsx",
+    "lint": "eslint . --ext .js,.ts",
-    "lint": "npm run _lint -- .",
     "postbundle": "del compiled && cp-cli ./index.js ./dist/index.js",
     "postversion": "git push && git push --tags && npm publish",
     "release": "npm version -m 'Release v%s'",
@@ -35,14 +34,13 @@
     "test:es": "jest --config ./scripts/jest/config.es.js",
     "test:src": "jest --config ./scripts/jest/config.src.js",
     "test:src:watch": "npm run test:src -- --watch",
-    "test:umd": "jest --config ./scripts/jest/config.umd.js",
-    "test:umdprod": "jest --config ./scripts/jest/config.umdprod.js",
     "test:src:debug": "node --inspect ./node_modules/jest/bin/jest.js  --config ./scripts/jest/config.src.js",
     "version": "run-s test authors && git add ."
   },
   "husky": {
     "hooks": {
-      "pre-commit": "lint-staged"
+      "pre-commit": "lint-staged",
+      "post-commit": "npm run fix:format"
     }
   },
   "repository": {
@@ -108,6 +106,7 @@
     "rollup-plugin-babel": "4.3.3",
     "rollup-plugin-commonjs": "10.0.1",
     "rollup-plugin-filesize": "6.1.1",
+    "rollup-plugin-multi-input": "^1.0.2",
     "rollup-plugin-node-resolve": "5.2.0",
     "rollup-plugin-replace": "2.2.0",
     "rollup-plugin-size-snapshot": "0.9.0",

rollup.config.js

@@ -2,9 +2,10 @@ import babel from "rollup-plugin-babel";
 import commonjs from "rollup-plugin-commonjs";
 import nodeResolve from "rollup-plugin-node-resolve";
 import replace from "rollup-plugin-replace";
-import { sizeSnapshot } from "rollup-plugin-size-snapshot";
+// import { sizeSnapshot } from "rollup-plugin-size-snapshot";
 import sourcemaps from "rollup-plugin-sourcemaps";
 import { terser } from "rollup-plugin-terser";
+import multiInput from "rollup-plugin-multi-input";
 import pkg from "./package.json";
 
 const CJS_DEV = "CJS_DEV";
@@ -13,7 +14,7 @@ const ES = "ES";
 const UMD_DEV = "UMD_DEV";
 const UMD_PROD = "UMD_PROD";
 
-const input = "./compiled/index.js";
+const input = ["compiled/*.js"];
 
 const getGlobals = bundleType => {
   const baseGlobals = {
@@ -124,7 +125,7 @@ const getPlugins = bundleType => [
     )
   }),
   sourcemaps(),
-  sizeSnapshot(),
+  // sizeSnapshot(),
   isProduction(bundleType) &&
     terser({
       sourcemap: true,
@@ -136,16 +137,15 @@ const getPlugins = bundleType => [
       warnings: true,
       ecma: 5,
       toplevel: false
-    })
+    }),
+  multiInput({ relative: "compiled/" })
 ];
 
 const getCjsConfig = bundleType => ({
   input,
   external: getExternal(bundleType),
   output: {
-    file: `dist/react-fiber-traverse.cjs.${
+    dir: `dist/cjs-${isProduction(bundleType) ? "production" : "development"}`,
-      isProduction(bundleType) ? "production" : "development"
-    }.js`,
     format: "cjs",
     sourcemap: true
   },
@@ -156,7 +156,7 @@ const getEsConfig = () => ({
   input,
   external: getExternal(ES),
   output: {
-    file: pkg.module,
+    dir: `dist/esm`,
     format: "es",
     sourcemap: true
   },
@@ -167,9 +167,7 @@ const getUmdConfig = bundleType => ({
   input,
   external: getExternal(bundleType),
   output: {
-    file: `dist/react-fiber-traverse.umd.${
+    dir: `dist/umd-${isProduction(bundleType) ? "production" : "development"}`,
-      isProduction(bundleType) ? "production" : "development"
-    }.js`,
     format: "umd",
     globals: getGlobals(bundleType),
     name: "reactFiberTraverse",
@@ -181,7 +179,7 @@ const getUmdConfig = bundleType => ({
 export default [
   getCjsConfig(CJS_DEV),
   getCjsConfig(CJS_PROD),
-  getEsConfig(),
+  getEsConfig()
-  getUmdConfig(UMD_DEV),
+  // getUmdConfig(UMD_DEV),
-  getUmdConfig(UMD_PROD)
+  // getUmdConfig(UMD_PROD)
 ];

scripts/jest/config.es.js

@@ -3,6 +3,6 @@ const srcConfig = require("./config.src");
 module.exports = Object.assign({}, srcConfig, {
   collectCoverage: false,
   moduleNameMapper: {
-    "^../src$": `<rootDir>/dist/react-fiber-traverse.esm.js`
+    "^../src$": `<rootDir>/dist/esm/index.js`
   }
 });

src/index.ts

@@ -4,13 +4,11 @@ import {
   findNodeByComponentRef,
   findNodeByComponentName
 } from "./findNode";
-import * as Utils from "./utils";
 
 export {
   traverse,
   traverseGenerator,
   findNodeByComponent,
   findNodeByComponentRef,
-  findNodeByComponentName,
+  findNodeByComponentName
-  Utils
 };

src/utils.ts

@@ -7,7 +7,6 @@ import {
   FiberNodeDOMContainer
 } from "./mocked-types";
 
-// Support null in all of these
 function isNodeHtmlLike(node: FiberNode): node is FiberNodeisHTMLLike {
   return typeof node.type === "string" || node.type === null;
 }
@@ -31,8 +30,8 @@ function isNodeComponentClass(
 }
 
 function isConstructorHtmlLike(
-  ctr: React.ElementType | null
+  ctr: React.ElementType
-): ctr is Exclude<React.ElementType | null, React.ComponentType> {
+): ctr is Exclude<React.ElementType, React.ComponentType> {
   if (typeof ctr === "string" || ctr === null) {
     return true;
   }
@@ -40,7 +39,7 @@ function isConstructorHtmlLike(
 }
 
 function isConstructorComponentClass(
-  ctr: React.ElementType | null
+  ctr: React.ElementType
 ): ctr is React.ComponentClass {
   if (isConstructorHtmlLike(ctr)) {
     return false;
@@ -57,20 +56,15 @@ function isConstructorComponentClass(
 }
 
 function isConstructorFunctionComponent(
-  ctr: React.ElementType | null
+  ctr: React.ElementType
 ): ctr is React.FunctionComponent {
-  return typeof ctr === "function" && !isConstructorComponentClass(ctr);
+  return !isConstructorComponentClass(ctr);
 }
 
 function doesElementContainRootFiberNode(
   element: Element
 ): element is FiberNodeDOMContainer {
-  return (
+  return element.hasOwnProperty("_reactRootContainer");
-    element.hasOwnProperty("_reactRootContainer") &&
-    (element as (Element & {
-      _reactRootContainer: any;
-    }))._reactRootContainer.hasOwnProperty("_internalRoot")
-  );
 }
 
 /**
@@ -107,6 +101,5 @@ export {
   isConstructorHtmlLike,
   isConstructorComponentClass,
   isConstructorFunctionComponent,
-  doesElementContainRootFiberNode,
   getRootFiberNodeFromDOM
 };

test/findNodeByComponent-negative.spec.tsx

@@ -1,177 +0,0 @@
-import * as React from "react";
-
-// Import stuff from src
-import { findNodeByComponent } from "../src";
-import { mountAndGetRootNode } from "./utils/mountInEnzyme";
-import getWrappedComponent from "./utils/getWrappedComponent";
-
-// Import test helpers and sample components
-import CDepth1 from "./sample-components/depth-1-simple";
-import FnDepth1 from "./sample-components/depth-1-fn-simple";
-import { createClassComponent } from "./utils/createComponent";
-
-describe("findNodeByComponent", () => {
-  let container: HTMLDivElement;
-
-  beforeEach(() => {
-    container = document.body.appendChild(document.createElement("div"));
-  });
-
-  afterEach(() => {
-    document.body.removeChild(container);
-  });
-
-  describe("missing", () => {
-    it("should not work for top-level class with same component name", () => {
-      const WrappedC = getWrappedComponent(CDepth1);
-      const rootNode = mountAndGetRootNode(WrappedC, container);
-
-      const FakeCDepth1 = createClassComponent(CDepth1.name);
-      const found = findNodeByComponent(rootNode, FakeCDepth1);
-
-      expect(found).toBeFalsy();
-      expect(found).toBe(null);
-    });
-
-    it("should not work for top-level class with different component name", () => {
-      const WrappedC = getWrappedComponent(CDepth1);
-      const rootNode = mountAndGetRootNode(WrappedC, container);
-
-      const FakeCDepth1 = createClassComponent("randomname");
-      const found = findNodeByComponent(rootNode, FakeCDepth1);
-
-      expect(found).toBeFalsy();
-      expect(found).toBe(null);
-    });
-
-    it("should not work for 2nd-level class with same component name", () => {
-      class C1 extends React.Component {
-        render() {
-          return <C2 />;
-        }
-      }
-      class C2 extends React.Component {
-        render() {
-          return <div>C2 here</div>;
-        }
-      }
-      const WrappedC = getWrappedComponent(C1);
-      const rootNode = mountAndGetRootNode(WrappedC, container);
-
-      const FakeC2 = createClassComponent(C2.name);
-      const found = findNodeByComponent(rootNode, FakeC2);
-
-      expect(found).toBeFalsy();
-      expect(found).toBe(null);
-    });
-
-    it("should not work for 2nd-level class with different component name", () => {
-      class C1 extends React.Component {
-        render() {
-          return <C2 />;
-        }
-      }
-      class C2 extends React.Component {
-        render() {
-          return <div>C2 here</div>;
-        }
-      }
-      const WrappedC = getWrappedComponent(C1);
-      const rootNode = mountAndGetRootNode(WrappedC, container);
-
-      const FakeC2 = createClassComponent("randomName");
-      const found = findNodeByComponent(rootNode, FakeC2);
-
-      expect(found).toBeFalsy();
-      expect(found).toBe(null);
-    });
-
-    it("should not work for top-level function with same function name", () => {
-      const WrappedC = getWrappedComponent(FnDepth1);
-      const rootNode = mountAndGetRootNode(WrappedC, container);
-
-      const FakeFnDepth1 = createClassComponent(FnDepth1.name);
-      const found = findNodeByComponent(rootNode, FakeFnDepth1);
-
-      expect(found).toBeFalsy();
-      expect(found).toBe(null);
-    });
-
-    it("should not work for top-level function with different function name", () => {
-      const WrappedC = getWrappedComponent(FnDepth1);
-      const rootNode = mountAndGetRootNode(WrappedC, container);
-
-      const FakeFnDepth1 = createClassComponent("randomName");
-      const found = findNodeByComponent(rootNode, FakeFnDepth1);
-
-      expect(found).toBeFalsy();
-      expect(found).toBe(null);
-    });
-
-    it("should not work for 2nd-level function with same function name", () => {
-      function Fn1() {
-        return <Fn2 />;
-      }
-      function Fn2() {
-        return <div>Fn2 here</div>;
-      }
-
-      const WrappedC = getWrappedComponent(Fn1);
-      const rootNode = mountAndGetRootNode(WrappedC, container);
-
-      const FakeFn2 = createClassComponent(Fn2.name);
-      const found = findNodeByComponent(rootNode, FakeFn2);
-
-      expect(found).toBeFalsy();
-      expect(found).toBe(null);
-    });
-
-    it("should not work for 2nd-level function with different function name", () => {
-      function Fn1() {
-        return <Fn2 />;
-      }
-      function Fn2() {
-        return <div>Fn2 here</div>;
-      }
-
-      const WrappedC = getWrappedComponent(Fn1);
-      const rootNode = mountAndGetRootNode(WrappedC, container);
-
-      const FakeFn2 = createClassComponent("randomName");
-      const found = findNodeByComponent(rootNode, FakeFn2);
-
-      expect(found).toBeFalsy();
-      expect(found).toBe(null);
-    });
-
-    it("should not work for 5th-level function with same or diff fn name", () => {
-      function Fn1() {
-        return (
-          <div>
-            <div>
-              <span></span>
-              <Fn2></Fn2>
-            </div>
-          </div>
-        );
-      }
-
-      function Fn2() {
-        return <a href="google.com">Fn2 here</a>;
-      }
-
-      const WrappedC = getWrappedComponent(Fn1);
-      const rootNode = mountAndGetRootNode(WrappedC, container);
-
-      const FakeFn2Same = createClassComponent(Fn2.name);
-      const FakeFn2Diff = createClassComponent("randomname");
-      const foundSame = findNodeByComponent(rootNode, FakeFn2Same);
-      const foundDiff = findNodeByComponent(rootNode, FakeFn2Diff);
-
-      expect(foundSame).toBeFalsy();
-      expect(foundSame).toBe(null);
-      expect(foundDiff).toBeFalsy();
-      expect(foundDiff).toBe(null);
-    });
-  });
-});

test/findNodeByComponentRef-negative.spec.tsx

@@ -1,95 +0,0 @@
-import * as React from "react";
-
-// Import stuff from src
-import { findNodeByComponentRef } from "../src";
-import { mountAndGetRootNode } from "./utils/mountInEnzyme";
-import getWrappedComponent from "./utils/getWrappedComponent";
-
-class RandomClass extends React.Component {
-  render() {
-    return <div></div>;
-  }
-}
-
-// Import test helpers and sample components
-
-describe("findNodeByComponentRef", () => {
-  let container: HTMLDivElement;
-
-  beforeEach(() => {
-    container = document.body.appendChild(document.createElement("div"));
-  });
-
-  afterEach(() => {
-    document.body.removeChild(container);
-  });
-
-  describe("negative", () => {
-    it("should not work for 2nd-level class", () => {
-      const C2Ref = React.createRef<C2>();
-
-      class C1 extends React.Component {
-        render() {
-          return <C2 ref={C2Ref} />;
-        }
-      }
-      class C2 extends React.Component {
-        render() {
-          return <div>C2 here</div>;
-        }
-      }
-      const WrappedC = getWrappedComponent(C1);
-      const rootNode = mountAndGetRootNode(WrappedC, container);
-
-      if (C2Ref.current === null) {
-        throw new Error("Ref is not yet set");
-      }
-
-      const foundSame = findNodeByComponentRef(rootNode, new C2({}));
-      const foundDiff = findNodeByComponentRef(rootNode, new RandomClass({}));
-
-      expect(foundSame).toBeFalsy();
-      expect(foundSame).toBe(null);
-      expect(foundDiff).toBeFalsy();
-      expect(foundDiff).toBe(null);
-    });
-
-    it("should work for 5th-level class", () => {
-      const C2Ref = React.createRef<C2>();
-
-      class C1 extends React.Component {
-        render() {
-          return (
-            <div>
-              <div>
-                <span></span>
-                <C2 ref={C2Ref}></C2>
-              </div>
-            </div>
-          );
-        }
-      }
-
-      class C2 extends React.Component {
-        render() {
-          return <a href="google.com">Fn2 here</a>;
-        }
-      }
-
-      const WrappedC = getWrappedComponent(C1);
-      const rootNode = mountAndGetRootNode(WrappedC, container);
-
-      if (C2Ref.current === null) {
-        throw new Error("Ref is not yet set");
-      }
-
-      const foundSame = findNodeByComponentRef(rootNode, new C2({}));
-      const foundDiff = findNodeByComponentRef(rootNode, new RandomClass({}));
-
-      expect(foundSame).toBeFalsy();
-      expect(foundSame).toBe(null);
-      expect(foundDiff).toBeFalsy();
-      expect(foundDiff).toBe(null);
-    });
-  });
-});

test/traverseGenerator-ordered.spec.tsx

@@ -26,7 +26,7 @@ describe("traverseGenerator", () => {
     document.body.removeChild(container);
   });
 
-  describe("ordered", () => {
+  describe("basic", () => {
     it("order doesn't matter for 1 node if self is present - case 1", () => {
       const rootNode = mountAndGetRootNode(CDepth1, container);
 

test/traverseGenerator-skipped.spec.tsx

@@ -1,143 +0,0 @@
-import * as React from "react";
-
-// Import stuff from src
-import { FiberNodeForComponentClass, FiberNode } from "../src/mocked-types";
-import { traverseGenerator } from "../src";
-
-// Import test helpers and sample components
-import { mountAndGetRootNode } from "./utils/mountInEnzyme";
-import {
-  createClassComponents
-  // createFunctionComponents
-} from "./utils/createComponent";
-
-describe("traverseGenerator", () => {
-  let container: HTMLDivElement;
-
-  beforeEach(() => {
-    container = document.body.appendChild(document.createElement("div"));
-  });
-
-  afterEach(() => {
-    document.body.removeChild(container);
-  });
-
-  describe("skipped", () => {
-    it("should traverse just top-level with skipChild", () => {
-      const [C2, C3, C4, C5] = createClassComponents(["C2", "C3", "C4", "C5"]);
-      class C1 extends React.Component {
-        render() {
-          return (
-            <React.Fragment>
-              <C2>
-                <C3 />
-              </C2>
-              <C4>
-                <C5 />
-              </C4>
-            </React.Fragment>
-          );
-        }
-      }
-
-      const rootNode = mountAndGetRootNode(C1, container);
-
-      const nodeIterator = traverseGenerator(rootNode);
-
-      // Consume generator
-      let nodes: Array<FiberNode> = [];
-      const genArgs = { skipChild: true };
-      for (
-        let result = nodeIterator.next();
-        !result.done;
-        result = nodeIterator.next(genArgs)
-      ) {
-        const currentNode = result.value;
-        nodes.push(currentNode);
-      }
-
-      expect(nodes.length).toBe(1);
-      expect(
-        nodes.map(tmpNode => (tmpNode as FiberNodeForComponentClass).type)
-      ).toEqual([C1]);
-    });
-
-    it("should traverse just first 2 levels with inner skipChild", () => {
-      const [C2, C3, C4, C5] = createClassComponents(["C2", "C3", "C4", "C5"]);
-      class C1 extends React.Component {
-        render() {
-          return (
-            <React.Fragment>
-              <C2>
-                <C3 />
-              </C2>
-              <C4>
-                <C5 />
-              </C4>
-            </React.Fragment>
-          );
-        }
-      }
-
-      const rootNode = mountAndGetRootNode(C1, container);
-
-      const nodeIterator = traverseGenerator(rootNode);
-
-      // Consume generator
-      let nodes: Array<FiberNode> = [];
-      const genArgs = { skipChild: true };
-      for (
-        let result = nodeIterator.next();
-        !result.done;
-        result = nodeIterator.next(nodes.length > 1 ? genArgs : undefined)
-      ) {
-        const currentNode = result.value;
-        nodes.push(currentNode);
-      }
-
-      expect(nodes.length).toBe(3);
-      expect(
-        nodes.map(tmpNode => (tmpNode as FiberNodeForComponentClass).type)
-      ).toEqual([C1, C2, C4]);
-    });
-
-    it("should traverse one branch correctly with skipSibling", () => {
-      const [C2, C3, C4, C5] = createClassComponents(["C2", "C3", "C4", "C5"]);
-      class C1 extends React.Component {
-        render() {
-          return (
-            <React.Fragment>
-              <C2>
-                <C3 />
-              </C2>
-              <C4>
-                <C5 />
-              </C4>
-            </React.Fragment>
-          );
-        }
-      }
-
-      const rootNode = mountAndGetRootNode(C1, container);
-
-      const nodeIterator = traverseGenerator(rootNode);
-
-      // Consume generator
-      let nodes: Array<FiberNode> = [];
-      const genArgs = { skipSibling: true };
-      for (
-        let result = nodeIterator.next();
-        !result.done;
-        result = nodeIterator.next(genArgs)
-      ) {
-        const currentNode = result.value;
-        nodes.push(currentNode);
-      }
-
-      expect(nodes.length).toBe(3);
-      expect(
-        nodes.map(tmpNode => (tmpNode as FiberNodeForComponentClass).type)
-      ).toEqual([C1, C2, C3]);
-    });
-  });
-});

test/utils.doesElementContainRootFiberNode.spec.tsx

@@ -1,77 +0,0 @@
-// import * as React from "react";
-
-// Import stuff from src
-import { doesElementContainRootFiberNode } from "../src/utils";
-
-// Import test helpers and sample components
-import { mountAndGetRootNode } from "./utils/mountInEnzyme";
-import { createFunctionComponent } from "./utils/createComponent";
-
-describe("traverse", () => {
-  let container: HTMLDivElement;
-
-  beforeEach(() => {
-    container = document.body.appendChild(document.createElement("div"));
-  });
-
-  afterEach(() => {
-    try {
-      document.body.removeChild(container);
-    } catch (error) {
-      if (!(error instanceof DOMException)) {
-        throw error;
-      }
-    }
-  });
-
-  describe("doesElementContainRootFiberNode", () => {
-    it("should work for direct element", () => {
-      const fn1 = createFunctionComponent("fn1");
-      const containerInner = container.appendChild(
-        document.createElement("span")
-      );
-      mountAndGetRootNode(fn1, containerInner);
-
-      const resultPositive = doesElementContainRootFiberNode(containerInner);
-
-      expect(resultPositive).not.toBeFalsy();
-      expect(resultPositive).toBe(true);
-    });
-
-    it("should not work for parent element", () => {
-      const fn1 = createFunctionComponent("fn1");
-      const containerInner = container.appendChild(
-        document.createElement("span")
-      );
-      mountAndGetRootNode(fn1, containerInner);
-
-      const resultNegative = doesElementContainRootFiberNode(container);
-
-      expect(resultNegative).toBeFalsy();
-      expect(resultNegative).toBe(false);
-    });
-
-    it("should not work for child element", () => {
-      const fn1 = createFunctionComponent("fn1");
-      const containerInner = container.appendChild(
-        document.createElement("span")
-      );
-      mountAndGetRootNode(fn1, container);
-
-      const resultNegative = doesElementContainRootFiberNode(containerInner);
-
-      expect(resultNegative).toBeFalsy();
-      expect(resultNegative).toBe(false);
-    });
-
-    it("should work for body", () => {
-      const fn1 = createFunctionComponent("fn1");
-      mountAndGetRootNode(fn1, document.body);
-
-      const resultPositive = doesElementContainRootFiberNode(document.body);
-
-      expect(resultPositive).not.toBeFalsy();
-      expect(resultPositive).toBe(true);
-    });
-  });
-});

test/utils.getRootFiberNodeFromDOM.spec.tsx

@@ -1,94 +0,0 @@
-// import * as React from "react";
-
-// Import stuff from src
-import { getRootFiberNodeFromDOM } from "../src/utils";
-
-// Import test helpers and sample components
-import { mountAndGetRootNode } from "./utils/mountInEnzyme";
-import { createClassComponent } from "./utils/createComponent";
-
-describe("traverse", () => {
-  let container: HTMLDivElement;
-
-  beforeEach(() => {
-    container = document.body.appendChild(document.createElement("div"));
-  });
-
-  afterEach(() => {
-    try {
-      document.body.removeChild(container);
-    } catch (error) {
-      if (!(error instanceof DOMException)) {
-        throw error;
-      }
-    }
-  });
-
-  describe("getRootFiberNodeFromDOM", () => {
-    it("should work for direct element", () => {
-      const C1 = createClassComponent("C1");
-      const containerInner = container.appendChild(
-        document.createElement("span")
-      );
-      mountAndGetRootNode(C1, containerInner);
-
-      const resultPositive = getRootFiberNodeFromDOM(containerInner);
-
-      expect(resultPositive).not.toBeFalsy();
-      expect(resultPositive).not.toBe(null);
-      expect((resultPositive as any).child.child.type).toBe(C1);
-    });
-
-    it("should work for parent element", () => {
-      const C1 = createClassComponent("C1");
-      const containerInner = container.appendChild(
-        document.createElement("span")
-      );
-      mountAndGetRootNode(C1, containerInner);
-
-      const resultPositive = getRootFiberNodeFromDOM(container);
-
-      expect(resultPositive).not.toBeFalsy();
-      expect(resultPositive).not.toBe(null);
-      expect((resultPositive as any).child.child.type).toBe(C1);
-    });
-
-    it("should work without any element - default args", () => {
-      const C1 = createClassComponent("C1");
-      const containerInner = container.appendChild(
-        document.createElement("span")
-      );
-      mountAndGetRootNode(C1, containerInner);
-
-      const resultPositive = getRootFiberNodeFromDOM();
-
-      expect(resultPositive).not.toBeFalsy();
-      expect(resultPositive).not.toBe(null);
-      expect((resultPositive as any).child.child.type).toBe(C1);
-    });
-
-    it("should not work for child element", () => {
-      const C1 = createClassComponent("C1");
-      const containerInner = container.appendChild(
-        document.createElement("span")
-      );
-      mountAndGetRootNode(C1, container);
-
-      const resultNegative = getRootFiberNodeFromDOM(containerInner);
-
-      expect(resultNegative).toBeFalsy();
-      expect(resultNegative).toBe(null);
-    });
-
-    it("should work for body", () => {
-      const C1 = createClassComponent("C1");
-      mountAndGetRootNode(C1, document.body);
-
-      const resultPositive = getRootFiberNodeFromDOM(document.body);
-
-      expect(resultPositive).not.toBeFalsy();
-      expect(resultPositive).not.toBe(null);
-      expect((resultPositive as any).child.child.type).toBe(C1);
-    });
-  });
-});

test/utils.isConstructorComponentClass.spec.tsx

@@ -1,74 +0,0 @@
-// import * as React from "react";
-
-// Import stuff from src
-import { isConstructorComponentClass } from "../src/utils";
-import {
-  createFunctionComponent,
-  createClassComponent
-} from "./utils/createComponent";
-
-// Import test helpers and sample components
-
-describe("utils", () => {
-  let container: HTMLDivElement;
-
-  beforeEach(() => {
-    container = document.body.appendChild(document.createElement("div"));
-  });
-
-  afterEach(() => {
-    document.body.removeChild(container);
-  });
-
-  describe("isConstructorComponentClass", () => {
-    it("should work for class components", () => {
-      const C1 = createClassComponent("C1");
-
-      const resultPositive = isConstructorComponentClass(C1);
-
-      expect(resultPositive).not.toBeFalsy();
-      expect(resultPositive).toBe(true);
-    });
-
-    it("should not work for any class", () => {
-      const C1 = class {};
-
-      const resultNegative = isConstructorComponentClass(C1 as any);
-
-      expect(resultNegative).toBeFalsy();
-      expect(resultNegative).toBe(false);
-    });
-
-    it("should not work for any function", () => {
-      const fn1 = function() {};
-
-      const resultNegative = isConstructorComponentClass(fn1 as any);
-
-      expect(resultNegative).toBeFalsy();
-      expect(resultNegative).toBe(false);
-    });
-
-    it("should not work for function components", () => {
-      const fn1 = createFunctionComponent();
-
-      const resultNegative = isConstructorComponentClass(fn1);
-
-      expect(resultNegative).toBeFalsy();
-      expect(resultNegative).toBe(false);
-    });
-
-    it("should not work for string", () => {
-      const resultNegative = isConstructorComponentClass("div");
-
-      expect(resultNegative).toBeFalsy();
-      expect(resultNegative).toBe(false);
-    });
-
-    it("should not work for null", () => {
-      const resultNegative = isConstructorComponentClass(null);
-
-      expect(resultNegative).toBeFalsy();
-      expect(resultNegative).toBe(false);
-    });
-  });
-});

test/utils.isConstructorFunctionComponent.spec.tsx

@@ -1,74 +0,0 @@
-// import * as React from "react";
-
-// Import stuff from src
-import { isConstructorFunctionComponent } from "../src/utils";
-import {
-  createFunctionComponent,
-  createClassComponent
-} from "./utils/createComponent";
-
-// Import test helpers and sample components
-
-describe("utils", () => {
-  let container: HTMLDivElement;
-
-  beforeEach(() => {
-    container = document.body.appendChild(document.createElement("div"));
-  });
-
-  afterEach(() => {
-    document.body.removeChild(container);
-  });
-
-  describe("isConstructorFunctionComponent", () => {
-    it("should work for any function - current limitation", () => {
-      const fn1 = function() {};
-
-      const resultPositive = isConstructorFunctionComponent(fn1 as any);
-
-      expect(resultPositive).not.toBeFalsy();
-      expect(resultPositive).toBe(true);
-    });
-
-    it("should work for function components", () => {
-      const fn1 = createFunctionComponent();
-
-      const resultPositive = isConstructorFunctionComponent(fn1);
-
-      expect(resultPositive).not.toBeFalsy();
-      expect(resultPositive).toBe(true);
-    });
-
-    it("should not work for string", () => {
-      const resultNegative = isConstructorFunctionComponent("div");
-
-      expect(resultNegative).toBeFalsy();
-      expect(resultNegative).toBe(false);
-    });
-
-    it("should not work for null", () => {
-      const resultNegative = isConstructorFunctionComponent(null);
-
-      expect(resultNegative).toBeFalsy();
-      expect(resultNegative).toBe(false);
-    });
-
-    it("should work for any class - current limitation", () => {
-      const C1 = class {};
-
-      const resultPositive = isConstructorFunctionComponent(C1 as any);
-
-      expect(resultPositive).not.toBeFalsy();
-      expect(resultPositive).toBe(true);
-    });
-
-    it("should not work for class components", () => {
-      const C1 = createClassComponent("C1");
-
-      const resultNegative = isConstructorFunctionComponent(C1);
-
-      expect(resultNegative).toBeFalsy();
-      expect(resultNegative).toBe(false);
-    });
-  });
-});

test/utils.isConstructorHtmlLike.spec.tsx

@@ -1,74 +0,0 @@
-// import * as React from "react";
-
-// Import stuff from src
-import { isConstructorHtmlLike } from "../src/utils";
-import {
-  createFunctionComponent,
-  createClassComponent
-} from "./utils/createComponent";
-
-// Import test helpers and sample components
-
-describe("utils", () => {
-  let container: HTMLDivElement;
-
-  beforeEach(() => {
-    container = document.body.appendChild(document.createElement("div"));
-  });
-
-  afterEach(() => {
-    document.body.removeChild(container);
-  });
-
-  describe("isConstructorHtmlLike", () => {
-    it("should work for string", () => {
-      const resultPositive = isConstructorHtmlLike("div");
-
-      expect(resultPositive).not.toBeFalsy();
-      expect(resultPositive).toBe(true);
-    });
-
-    it("should work for null", () => {
-      const resultPositive = isConstructorHtmlLike(null);
-
-      expect(resultPositive).not.toBeFalsy();
-      expect(resultPositive).toBe(true);
-    });
-
-    it("should not work for any function", () => {
-      const fn1 = function() {};
-
-      const resultNegative = isConstructorHtmlLike(fn1 as any);
-
-      expect(resultNegative).toBeFalsy();
-      expect(resultNegative).toBe(false);
-    });
-
-    it("should not work for function components", () => {
-      const fn1 = createFunctionComponent();
-
-      const resultNegative = isConstructorHtmlLike(fn1);
-
-      expect(resultNegative).toBeFalsy();
-      expect(resultNegative).toBe(false);
-    });
-
-    it("should not work for any class", () => {
-      const C1 = class {};
-
-      const resultNegative = isConstructorHtmlLike(C1 as any);
-
-      expect(resultNegative).toBeFalsy();
-      expect(resultNegative).toBe(false);
-    });
-
-    it("should not work for class components", () => {
-      const C1 = createClassComponent("C1");
-
-      const resultNegative = isConstructorHtmlLike(C1);
-
-      expect(resultNegative).toBeFalsy();
-      expect(resultNegative).toBe(false);
-    });
-  });
-});

test/utils.isNodeComponentClass.spec.tsx

@@ -1,63 +0,0 @@
-// import * as React from "react";
-
-// Import stuff from src
-import { isNodeComponentClass } from "../src/utils";
-import { mountAndGetRootNode } from "./utils/mountInEnzyme";
-import {
-  createFunctionComponent,
-  createClassComponent
-} from "./utils/createComponent";
-
-// Import test helpers and sample components
-
-describe("utils", () => {
-  let container: HTMLDivElement;
-
-  beforeEach(() => {
-    container = document.body.appendChild(document.createElement("div"));
-  });
-
-  afterEach(() => {
-    document.body.removeChild(container);
-  });
-
-  describe("isNodeComponentClass", () => {
-    it("should work for class component", () => {
-      const C1 = createClassComponent("C1");
-      const rootNode = mountAndGetRootNode(C1, container);
-
-      const result = isNodeComponentClass(rootNode);
-
-      expect(result).not.toBeFalsy();
-      expect(result).toBe(true);
-    });
-
-    it("should not work for function component", () => {
-      const fn1 = createFunctionComponent("fn1");
-      const rootNode = mountAndGetRootNode(fn1, container);
-
-      const result = isNodeComponentClass(rootNode);
-
-      expect(result).toBeFalsy();
-      expect(result).toBe(false);
-    });
-
-    it("should not work for html like component - div", () => {
-      const rootNode = mountAndGetRootNode("div", container);
-
-      const result = isNodeComponentClass(rootNode);
-
-      expect(result).toBeFalsy();
-      expect(result).toBe(false);
-    });
-
-    it("should not work for html like component - svg", () => {
-      const rootNode = mountAndGetRootNode("svg", container);
-
-      const result = isNodeComponentClass(rootNode);
-
-      expect(result).toBeFalsy();
-      expect(result).toBe(false);
-    });
-  });
-});

test/utils.isNodeFunctionComponent.spec.tsx

@@ -1,63 +0,0 @@
-// import * as React from "react";
-
-// Import stuff from src
-import { isNodeFunctionComponent } from "../src/utils";
-import { mountAndGetRootNode } from "./utils/mountInEnzyme";
-import {
-  createFunctionComponent,
-  createClassComponent
-} from "./utils/createComponent";
-
-// Import test helpers and sample components
-
-describe("utils", () => {
-  let container: HTMLDivElement;
-
-  beforeEach(() => {
-    container = document.body.appendChild(document.createElement("div"));
-  });
-
-  afterEach(() => {
-    document.body.removeChild(container);
-  });
-
-  describe("isNodeFunctionComponent", () => {
-    it("should work for function component", () => {
-      const fn1 = createFunctionComponent("fn1");
-      const rootNode = mountAndGetRootNode(fn1, container);
-
-      const result = isNodeFunctionComponent(rootNode);
-
-      expect(result).not.toBeFalsy();
-      expect(result).toBe(true);
-    });
-
-    it("should not work for class component", () => {
-      const C1 = createClassComponent("C1");
-      const rootNode = mountAndGetRootNode(C1, container);
-
-      const result = isNodeFunctionComponent(rootNode);
-
-      expect(result).toBeFalsy();
-      expect(result).toBe(false);
-    });
-
-    it("should not work for html like component - div", () => {
-      const rootNode = mountAndGetRootNode("div", container);
-
-      const result = isNodeFunctionComponent(rootNode);
-
-      expect(result).toBeFalsy();
-      expect(result).toBe(false);
-    });
-
-    it("should work for html like component - svg", () => {
-      const rootNode = mountAndGetRootNode("svg", container);
-
-      const result = isNodeFunctionComponent(rootNode);
-
-      expect(result).toBeFalsy();
-      expect(result).toBe(false);
-    });
-  });
-});

test/utils.isNodeHtmlLike.spec.tsx

@@ -1,102 +0,0 @@
-import * as React from "react";
-
-// Import stuff from src
-import { isNodeHtmlLike, isNodeNotHtmlLike } from "../src/utils";
-import { mountAndGetRootNode } from "./utils/mountInEnzyme";
-import { FiberNodeForInstrinsicElement } from "../src/mocked-types";
-import {
-  createFunctionComponent,
-  createClassComponent
-} from "./utils/createComponent";
-
-// Import test helpers and sample components
-
-describe("utils", () => {
-  let container: HTMLDivElement;
-
-  beforeEach(() => {
-    container = document.body.appendChild(document.createElement("div"));
-  });
-
-  afterEach(() => {
-    document.body.removeChild(container);
-  });
-
-  describe("isNodeHtmlLike", () => {
-    it("should work for div", () => {
-      const rootNode = mountAndGetRootNode("div", container);
-
-      const resultPositive = isNodeHtmlLike(rootNode);
-      const resultNegative = isNodeNotHtmlLike(rootNode);
-
-      expect(resultPositive).not.toBeFalsy();
-      expect(resultPositive).toBe(true);
-      expect(resultNegative).toBeFalsy();
-      expect(resultNegative).toBe(false);
-    });
-
-    it("should work for svg root element", () => {
-      const rootNode = mountAndGetRootNode("svg", container);
-
-      const resultPositive = isNodeHtmlLike(rootNode);
-      const resultNegative = isNodeNotHtmlLike(rootNode);
-
-      expect(resultPositive).not.toBeFalsy();
-      expect(resultPositive).toBe(true);
-      expect(resultNegative).toBeFalsy();
-      expect(resultNegative).toBe(false);
-    });
-
-    it("should work for svg inner elements", () => {
-      function SomeSVG() {
-        return (
-          <svg>
-            <circle cx={5} />
-          </svg>
-        );
-      }
-      const rootNode = mountAndGetRootNode(SomeSVG, container);
-
-      expect(isNodeHtmlLike(rootNode)).toBeFalsy();
-
-      const circleNode = (rootNode.child as FiberNodeForInstrinsicElement)
-        .child as FiberNodeForInstrinsicElement;
-      expect(circleNode).not.toBe(null);
-      expect(circleNode.type).toBe("circle");
-
-      const resultPositive = isNodeHtmlLike(circleNode);
-      const resultNegative = isNodeNotHtmlLike(circleNode);
-
-      expect(resultPositive).not.toBeFalsy();
-      expect(resultPositive).toBe(true);
-      expect(resultNegative).toBeFalsy();
-      expect(resultNegative).toBe(false);
-    });
-
-    it("should not work for function component", () => {
-      const fn1 = createFunctionComponent("fn1");
-      const rootNode = mountAndGetRootNode(fn1, container);
-
-      const resultPositive = isNodeNotHtmlLike(rootNode);
-      const resultNegative = isNodeHtmlLike(rootNode);
-
-      expect(resultPositive).not.toBeFalsy();
-      expect(resultPositive).toBe(true);
-      expect(resultNegative).toBeFalsy();
-      expect(resultNegative).toBe(false);
-    });
-
-    it("should not work for class component", () => {
-      const C1 = createClassComponent("C1");
-      const rootNode = mountAndGetRootNode(C1, container);
-
-      const resultPositive = isNodeNotHtmlLike(rootNode);
-      const resultNegative = isNodeHtmlLike(rootNode);
-
-      expect(resultPositive).not.toBeFalsy();
-      expect(resultPositive).toBe(true);
-      expect(resultNegative).toBeFalsy();
-      expect(resultNegative).toBe(false);
-    });
-  });
-});

test/utils/mountInEnzyme.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { mount } from "enzyme";
 import { FiberNode, FiberNodeForComponentClass } from "../../src/mocked-types";
-import { isConstructorComponentClass } from "../../src/utils";
+import { isConstructorFunctionComponent } from "../../src/utils";
 import getWrappedComponent from "./getWrappedComponent";
 
 export class RootNodeNotFoundError extends Error {
@@ -13,14 +13,14 @@ export class RootNodeNotFoundError extends Error {
 }
 
 export function mountAndGetRootNode(
-  SomeComponent: React.ElementType,
+  SomeComponent: React.ComponentType,
   container: HTMLElement
 ): FiberNode {
   const rootRef = React.createRef<React.Component>();
 
-  let ToMount: React.ComponentClass | undefined = undefined;
+  let ToMount = undefined;
   // Wrap function components in ComponentClass to be able to set ref
-  if (!isConstructorComponentClass(SomeComponent)) {
+  if (isConstructorFunctionComponent(SomeComponent)) {
     ToMount = getWrappedComponent(SomeComponent);
   } else {
     ToMount = SomeComponent;
@@ -41,7 +41,7 @@ export function mountAndGetRootNode(
   }
 
   // Unwrap function components to return expected root node
-  if (!isConstructorComponentClass(SomeComponent)) {
+  if (isConstructorFunctionComponent(SomeComponent)) {
     return (rootNode as FiberNodeForComponentClass).child as FiberNode;
   } else {
     return rootNode;