testing improvements (#91)

* initial commit

* added react17 and 18 as peer dependencies

* only react18 as peer dependency

* update prettier and eslint scripts

* react as a peer dependency and test script improvements

* temporarily remove depcheck

* fix vite entry point for build

* started unit tests for core and root

* build options changes

* update github workflow

* regenerate package-lock.json

* misc test update

* improved build and testing

* clean ups and legacy export

* make types accessible in build

* restructure testing folders

* path fix;

* another path fix

* creared node scripts for copying test file

* update path for test copy script

* remove unneccesary root tests and update core tests

* remove can-stache test and npm package and wrap tests in describe block

* vite build test

* update typecheck script

* update tsconfig to exclude builds test folder

* update buildTests to build vite example build

* swc build

* webpack build test

* misc script fix

* buildtests fix

* clean up

Author: zerico007

.gitignore

@@ -1,5 +1,7 @@
 node_modules/
 dist/
+dist-swc/
+build/
 
 src/tests/*/react-to-webcomponent.test.jsx
 

package-lock.json

@@ -3,6 +3,7 @@
   "version": "2.0.0-alpha.3",
   "description": "Convert react components to native Web Components.",
   "type": "module",
+  "types": "dist/root/root.d.ts",
   "exports": {
     ".": {
       "import": "./dist/root.js",
@@ -36,8 +37,6 @@
     "@types/react": "^18.0.33",
     "@types/react-dom": "^18.0.11",
     "@webcomponents/custom-elements": "^1.2.4",
-    "can-stache": "^4.17.20",
-    "can-stache-bindings": "^4.10.9",
     "depcheck": "^1.4.3",
     "eslint": "^8.0.0",
     "eslint-plugin-react": "^7.21.4",
@@ -53,9 +52,9 @@
     "build": "vite build",
     "ci": "npm run test",
     "buildtests": "chmod +x src/tests/buildtests && ./src/tests/buildtests",
-    "test": "vitest src/tests/**/react-to-webcomponent.test.jsx && npm run test:core && npm run test:root",
+    "test": "vitest src/tests/environments/**/react-to-webcomponent.test.jsx && npm run test:core && npm run test:builds",
     "test:core": "vitest src/core/core.test.tsx",
-    "test:root": "vitest src/root/root.test.tsx",
+    "test:builds": "vitest src/tests/builds/builds.test.ts",
     "start": "http-server -c-1",
     "typecheck": "tsc --noEmit",
     "eslint": "eslint ./src/**/*.ts",

package.json

@@ -1,29 +1,61 @@
-import { test, expect, vi } from "vitest"
+import { describe, test, expect, vi, afterEach } from "vitest"
+import React from "react"
 import r2wc from "."
 
 // mock renderer
 const mount = vi.fn()
 const unmount = vi.fn()
 
-test("mount and unmount is called", async () => {
-  function TestComponent() {
-    
-    return <div>hello</div>
-  }
-  const body = document.body
+describe("r2wc core", () => {
+  afterEach(() => {
+    // reset DOM
+    document.body.innerHTML = ""
+    // reset mock
+    mount.mockReset()
+    unmount.mockReset()
+  })
+  test("mount and unmount is called in functional component", async () => {
+    function TestComponent() {
+      return <div>hello</div>
+    }
+    const body = document.body
 
-  const TestElement = r2wc(TestComponent, {}, { mount, unmount })
-  customElements.define("test-element", TestElement)
+    const TestElement = r2wc(TestComponent, {}, { mount, unmount })
+    customElements.define("test-func-element", TestElement)
 
-  const testEl = new TestElement();
+    const testEl = new TestElement()
 
-  body.appendChild(testEl)
+    body.appendChild(testEl)
 
-  expect(mount).toBeCalledTimes(1)
+    expect(mount).toBeCalledTimes(1)
 
-  body.removeChild(testEl)
+    body.removeChild(testEl)
 
-  expect(unmount).toBeCalledTimes(1)
+    expect(unmount).toBeCalledTimes(1)
+  })
 
+  test("mount and unmount is called in class component", async () => {
+    class TestClassComponent extends React.Component {
+      render() {
+        return <div>hello</div>
+      }
+    }
+    const body = document.body
+    class TestClassElement extends r2wc(TestClassComponent, {}, {
+      mount,
+      unmount,
+    }) {}
 
+    customElements.define("test-class-element", TestClassElement)
+
+    const testEl = new TestClassElement()
+
+    body.appendChild(testEl)
+
+    expect(mount).toBeCalledTimes(1)
+
+    body.removeChild(testEl)
+
+    expect(unmount).toBeCalledTimes(1)
+  })
 })

src/core/core.test.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React from "react"
+import { ComponentClass, FC, R2WCOptions, Renderer } from "../types"
 
 const renderSymbol = Symbol.for("r2wc.reactRender")
 const shouldRenderSymbol = Symbol.for("r2wc.shouldRender")

src/core/core.ts

@@ -1,3 +1,12 @@
+import {
+  ComponentClass,
+  Container,
+  FC,
+  R2WCOptions,
+  ReactElement,
+  RefObject,
+} from "../types"
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const renderSymbol = Symbol.for("r2wc.reactRender")
 const shouldRenderSymbol = Symbol.for("r2wc.shouldRender")