Initial commit

.gitignore

@@ -0,0 +1,10 @@
+*.log
+package-lock.json
+bun.lockb
+
+.idea/
+dist/
+node_modules/
+.DS_Store
+.cache
+build

.npmignore

@@ -0,0 +1,8 @@
+.git*
+coverage*
+package-lock.json
+bun.lockb
+test/
+node_modules/
+tsconfig.json
+**/*.test.*

LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 react-assert maintainers
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -0,0 +1,27 @@
+[![CI](https://github.com/viktor-podzigun/react-assert/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/viktor-podzigun/react-assert/actions/workflows/ci.yml?query=workflow%3Aci+branch%3Amain)
+[![Coverage Status](https://coveralls.io/repos/github/viktor-podzigun/react-assert/badge.svg?branch=main)](https://coveralls.io/github/viktor-podzigun/react-assert?branch=main)
+[![npm version](https://img.shields.io/npm/v/react-assert)](https://www.npmjs.com/package/react-assert)
+
+## react-assert
+
+Test utility that helps making your React.js rendering predictable.
+
+It provides assertion utils to validate
+[react-test-renderer](https://legacy.reactjs.org/docs/test-renderer.html)
+output. Similar to snapshot testing but with expectations written using
+familiar react rendering syntax.
+
+### Install
+
+```bash
+npm i --save-dev react-assert
+```
+
+### Usage
+
+Imports:
+
+```javascript
+import TestRenderer from "react-test-renderer";
+import { assertComponent } from "react-assert";
+```

index.d.ts

@@ -0,0 +1 @@
+export * from "./src/assertComponent";

index.mjs

@@ -0,0 +1 @@
+export { default as assertComponent } from "./src/assertComponent.mjs";

package.json

@@ -0,0 +1,50 @@
+{
+  "name": "react-assert",
+  "author": "viktor-podzigun",
+  "version": "0.0.0",
+  "license": "MIT",
+  "description": "Make your React.js rendering predictable",
+  "scripts": {
+    "test": "tsc && bun test && node ./test/all.mjs",
+    "format": "prettier **/*.mjs **/*.ts --write",
+    "formatCheck": "prettier **/*.mjs **/*.ts --check"
+  },
+  "type": "module",
+  "exports": "./index.mjs",
+  "types": "./index.d.ts",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/viktor-podzigun/react-assert.git"
+  },
+  "homepage": "https://github.com/viktor-podzigun/react-assert",
+  "bugs": {
+    "url": "http://github.com/viktor-podzigun/react-assert/issues"
+  },
+  "keywords": [
+    "test",
+    "react",
+    "react-test-renderer"
+  ],
+  "engines": {
+    "node": ">=16",
+    "bun": ">=0.5.8"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.1",
+    "react-test-renderer": ">=17.0.1"
+  },
+  "devDependencies": {
+    "@types/node": "^16.6.2",
+    "@types/react": "^17.0.1",
+    "@types/react-test-renderer": "^17.0.1",
+    "c8": "^7.13.0",
+    "prettier": "^2.8.8",
+    "react": "^17.0.1",
+    "react-test-renderer": "^17.0.1",
+    "typescript": "^4.9.5"
+  }
+}

src/assertComponent.d.ts

@@ -0,0 +1,5 @@
+export interface TestInstance {
+  type: any;
+  props: { [propName: string]: any };
+  children?: Array<TestInstance | string>;
+}

src/assertComponent.mjs

@@ -0,0 +1,162 @@
+import assert from "node:assert/strict";
+
+/**
+ * @param { import('react-test-renderer').ReactTestInstance | string } result
+ * @param { import('react').ReactElement | string } expectedElement
+ */
+function assertComponent(result, expectedElement) {
+  assertComponentImpl(
+    typeof expectedElement === "string"
+      ? expectedElement
+      : Object(expectedElement.type).toString(),
+    result,
+    expectedElement
+  );
+}
+
+/**
+ * @param { string } name
+ * @param { import('./assertComponent').TestInstance | string } result
+ * @param { import('./assertComponent').TestInstance | string } expectedElement
+ */
+function assertComponentImpl(name, result, expectedElement) {
+  if (typeof result === "string" || typeof expectedElement === "string") {
+    assert.deepEqual(
+      result,
+      expectedElement,
+      `Elements doesn't match for ${name}` +
+        `\n\tactual:   ${result}` +
+        `\n\texpected: ${expectedElement}`
+    );
+    return;
+  }
+
+  assert.deepEqual(
+    result.type,
+    expectedElement.type,
+    `Components types doesn't match for ${name}` +
+      `\n\tactual:   ${
+        result.type.displayName ? result.type.displayName : result.type
+      }` +
+      `\n\texpected: ${
+        expectedElement.type.displayName
+          ? expectedElement.type.displayName
+          : expectedElement.type
+      }`
+  );
+
+  Object.keys(expectedElement.props)
+    .filter((p) => {
+      return p != "children" && p != "assertWrapped" && p != "assertPlain";
+    })
+    .forEach((attr) => {
+      const resultValue = result.props[attr];
+      const expectedValue = expectedElement.props[attr];
+      if (typeof expectedValue === "object" && !Array.isArray(expectedValue)) {
+        assertObject(`${name}.${attr}`, resultValue, expectedValue);
+      } else {
+        assertAttrValue(`${name}.${attr}`, resultValue, expectedValue);
+      }
+    });
+
+  const children = getComponentChildren(result);
+  const expectedChildren = getComponentChildren(expectedElement);
+  if (expectedChildren.length === 0) {
+    if (children.length > 0) {
+      const resultChildren = children.map((child) => {
+        if (typeof child === "string") {
+          return child;
+        }
+
+        return child.type.displayName
+          ? child.type.displayName
+          : Object(child.type).toString();
+      });
+      assert.fail(
+        `Expected no children for ${name}, but got: ${resultChildren}`
+      );
+    }
+  } else {
+    assert.deepEqual(
+      children.length,
+      expectedChildren.length,
+      `Children count doesn't match for ${name}` +
+        `\n\tactual:   ${children.length}` +
+        `\n\texpected: ${expectedChildren.length}`
+    );
+
+    expectedChildren.forEach((expected, i) => {
+      assertComponentImpl(name, children[i], expected);
+    });
+  }
+}
+
+/**
+ *
+ * @param {string} name
+ * @param {any} resultValue
+ * @param {any} expectedObject
+ */
+function assertObject(name, resultValue, expectedObject) {
+  assertAttrValue(name, typeof resultValue, "object");
+
+  if (resultValue !== expectedObject) {
+    const resultObject = resultValue;
+    const resultKeys = new Set(Object.keys(resultObject));
+    const expectedKeys = new Set(Object.keys(expectedObject));
+    assertAttrValue(name, resultKeys, expectedKeys);
+
+    expectedKeys.forEach((key) => {
+      const resultValue = resultObject[key];
+      const expectedValue = expectedObject[key];
+      if (typeof expectedValue === "object") {
+        assertObject(`${name}.${key}`, resultValue, expectedValue);
+      } else {
+        assertAttrValue(`${name}.${key}`, resultValue, expectedValue);
+      }
+    });
+  }
+}
+
+/**
+ * @param {string} name
+ * @param {any} resultValue
+ * @param {any} expectedValue
+ */
+function assertAttrValue(name, resultValue, expectedValue) {
+  assert.deepStrictEqual(
+    resultValue,
+    expectedValue,
+    `Attribute value doesn't match for ${name}` +
+      `\n\tactual:   ${resultValue}` +
+      `\n\texpected: ${expectedValue}`
+  );
+}
+
+/**
+ * @param {import('./assertComponent').TestInstance} result
+ * @returns {(import('./assertComponent').TestInstance | string)[]}
+ */
+function getComponentChildren(result) {
+  // in case of ReactElement get children from props
+  // in case of TestInstance return children as it is
+  //
+  const children = result.children;
+  if (children && children.length > 0) {
+    return children;
+  }
+
+  if (result.props && result.props.children) {
+    const children = result.props.children;
+    if (Array.isArray(children)) {
+      return children;
+    }
+
+    // wrap singel child into array
+    return [children];
+  }
+
+  return [];
+}
+
+export default assertComponent;

test/all.mjs

@@ -0,0 +1,2 @@
+await import("./testRenderer.test.mjs");
+await import("./assertComponent.test.mjs");