Mirror existing React tests for Preact, update dependencies

FormidableLabs · May 5, 2020 · 6b27819 · 6b27819
1 parent 93b097e
commit 6b27819
Show file tree

Hide file tree

Showing 3 changed files with 256 additions and 43 deletions.
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
   "devDependencies": {
     "@babel/core": "^7.7.5",
     "@babel/preset-env": "^7.7.6",
+    "@testing-library/dom": "^7.2.2",
     "babel-loader": "^8.0.6",
     "benchmark": "^2.1.4",
     "builder": "^5.0.0",
@@ -58,8 +59,8 @@
     "mocha": "^6.2.2",
     "nano-equal": "^2.0.2",
     "nyc": "^14.1.1",
+    "preact": "^10.4.1",
     "react": "^16.3.1",
-    "react-test-renderer": "^16.3.1",
     "shallow-equal-fuzzy": "0.0.2",
     "sinon": "^7.5.0",
     "terser": "^4.4.3",

diff --git a/test/node/advanced.spec.js b/test/node/advanced.spec.js
@@ -3,12 +3,13 @@
 const assert = require('assert');
 const sinon = require('sinon');
 const React = require('react');
-const ReactTestRenderer = require('react-test-renderer');
+const Preact = require('preact');
+const DomTestRenderer = require('@testing-library/dom');
 
 const equal = require('../..');
 const tests = require('./tests');
 
-class ChildWithShouldComponentUpdate extends React.Component {
+class ReactChild extends React.Component {
   shouldComponentUpdate(nextProps) {
     // this.props.children is a h1 with a circular reference to its owner, Container
     return !equal(this.props, nextProps);
@@ -18,26 +19,49 @@ class ChildWithShouldComponentUpdate extends React.Component {
   }
 }
 
-class Container extends React.Component {
+class PreactChild extends Preact.Component {
+  shouldComponentUpdate(nextProps) {
+    // this.props.children is a h1 with a circular reference to its owner, Container
+    return !equal(this.props, nextProps);
+  }
+  render() {
+    return null;
+  }
+}
+
+class ReactContainer extends React.Component {
   render() {
-    return React.createElement(ChildWithShouldComponentUpdate, {
+    return React.createElement(ReactChild, {
       children: [
         React.createElement('h1', this.props.title || ''),
-        React.createElement('h2', this.props.subtitle || '')
-      ]
+        React.createElement('h2', this.props.subtitle || ''),
+      ],
+    });
+  }
+}
+
+class PreactContainer extends Preact.Component {
+  render() {
+    return Preact.createElement(PreactChild, {
+      children: [
+        React.createElement('h1', this.props.title || ''),
+        React.createElement('h2', this.props.subtitle || ''),
+      ],
     });
   }
 }
 
 describe('advanced', () => {
   let sandbox;
   let warnStub;
-  let childRenderSpy;
+  let reactChildRenderSpy;
+  let preactChildRenderSpy;
 
   beforeEach(() => {
     sandbox = sinon.createSandbox();
     warnStub = sandbox.stub(console, 'warn');
-    childRenderSpy = sandbox.spy(ChildWithShouldComponentUpdate.prototype, 'render');
+    reactChildRenderSpy = sandbox.spy(ReactChild.prototype, 'render');
+    preactChildRenderSpy = sandbox.spy(PreactChild.prototype, 'render');
   });
 
   afterEach(() => {
@@ -47,43 +71,86 @@ describe('advanced', () => {
   describe('React', () => {
     describe('element (with circular references)', () => {
       it('compares without warning or errors', () => {
-        const testRenderer = ReactTestRenderer.create(React.createElement(Container));
-        testRenderer.update(React.createElement(Container));
+        const reactApp = DomTestRenderer.create(
+          React.createElement(ReactContainer)
+        );
+        reactApp.update(React.createElement(ReactContainer));
+        assert.strictEqual(warnStub.callCount, 0);
+      });
+      it('elements of same type and props are equal', () => {
+        const reactApp = DomTestRenderer.create(
+          React.createElement(ReactContainer)
+        );
+        reactApp.update(React.createElement(ReactContainer));
+        assert.strictEqual(reactChildRenderSpy.callCount, 1);
+      });
+      it('elements of same type with different props are not equal', () => {
+        const reactApp = DomTestRenderer.create(
+          React.createElement(ReactContainer)
+        );
+        reactApp.update(React.createElement(ReactContainer, { title: 'New' }));
+        assert.strictEqual(reactChildRenderSpy.callCount, 2);
+      });
+    });
+  });
+
+  describe('Preact', () => {
+    describe('element (with circular references)', () => {
+      it('compares without warning or errors', () => {
+        const preactApp = DomTestRenderer.create(
+          Preact.createElement(PreactContainer)
+        );
+        preactApp.update(React.createElement(PreactContainer));
         assert.strictEqual(warnStub.callCount, 0);
       });
       it('elements of same type and props are equal', () => {
-        const testRenderer = ReactTestRenderer.create(React.createElement(Container));
-        testRenderer.update(React.createElement(Container));
-        assert.strictEqual(childRenderSpy.callCount, 1);
+        const preactApp = DomTestRenderer.create(
+          Preact.createElement(PreactContainer)
+        );
+        preactApp.update(React.createElement(PreactContainer));
+        assert.strictEqual(preactChildRenderSpy.callCount, 1);
       });
       it('elements of same type with different props are not equal', () => {
-        const testRenderer = ReactTestRenderer.create(React.createElement(Container));
-        testRenderer.update(React.createElement(Container, { title: 'New' }));
-        assert.strictEqual(childRenderSpy.callCount, 2);
+        const preactApp = DomTestRenderer.create(
+          Preact.createElement(PreactContainer)
+        );
+        preactApp.update(
+          React.createElement(PreactContainer, { title: 'New' })
+        );
+        assert.strictEqual(preactChildRenderSpy.callCount, 2);
       });
     });
   });
 
   describe('warnings', () => {
     describe('circular reference', () => {
       it('warns on circular refs but do not throw', () => {
-        const circularA = {a: 1};
+        const circularA = { a: 1 };
         circularA.self = circularA;
-        const circularB = {a: 1};
+        const circularB = { a: 1 };
         circularB.self = circularB;
         equal(circularA, circularB);
         assert.strictEqual(warnStub.callCount, 1);
       });
     });
     describe('basics usage', () => {
       it('never warns', () => {
-        tests.generic.forEach( (suite) => {
-          suite.tests.forEach( (test) => {
-            assert.strictEqual(equal(test.value1, test.value2), test.equal, test.description);
+        tests.generic.forEach((suite) => {
+          suite.tests.forEach((test) => {
+            assert.strictEqual(
+              equal(test.value1, test.value2),
+              test.equal,
+              test.description
+            );
           });
         });
-        assert.strictEqual(warnStub.callCount, 0,
-          `console.warn called ${warnStub.callCount} with arguments: ${JSON.stringify(warnStub.args)}`);
+        assert.strictEqual(
+          warnStub.callCount,
+          0,
+          `console.warn called ${
+            warnStub.callCount
+          } with arguments: ${JSON.stringify(warnStub.args)}`
+        );
       });
     });
   });