test: setup the testing environment (#121)

* test: setup testing environment with vitest

* ci: setup test on CI

* fix: ignore type errors

* test: add test settings for swr-devtools

* fix: action name

Author: koba04

.github/workflows/lint.yml

@@ -16,7 +16,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x, 16.x, 18.x]
+        node-version: [18.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:

.github/workflows/test.yml

@@ -0,0 +1,31 @@
+# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: test
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  lint:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x, 16.x, 18.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'yarn'
+    - run: yarn install
+    - run: yarn build
+    - run: yarn test

examples/swr-devtools-demo/pages/_document.tsx

@@ -10,6 +10,7 @@ export default class MyDocument extends Document {
       ctx.renderPage = () =>
         originalRenderPage({
           enhanceApp: (App) => (props) =>
+            // @ts-expect-error
             sheet.collectStyles(<App {...props} />),
         });
 

examples/swr-v1-devtools-demo/pages/_document.tsx

@@ -10,6 +10,7 @@ export default class MyDocument extends Document {
       ctx.renderPage = () =>
         originalRenderPage({
           enhanceApp: (App) => (props) =>
+            // @ts-expect-error
             sheet.collectStyles(<App {...props} />),
         });
 

examples/swr-v1-legacy-devtools-demo/pages/_app.tsx

@@ -13,7 +13,6 @@ const fetcher = async (url) => {
 
 function MyApp({ Component, pageProps }) {
   return (
-    // @ts-expect-error
     <SWRConfig value={{ fetcher }}>
       <SWRDevTools>
         <Component {...pageProps} />

examples/swr-v1-legacy-devtools-demo/pages/_document.tsx

@@ -10,6 +10,7 @@ export default class MyDocument extends Document {
       ctx.renderPage = () =>
         originalRenderPage({
           enhanceApp: (App) => (props) =>
+            // @ts-expect-error
             sheet.collectStyles(<App {...props} />),
         });
 

package.json

@@ -23,7 +23,10 @@
     "v1-legacy": "yarn workspace swr-v1-legacy-devtools-demo dev",
     "lint:eslint": "eslint '**/pages/**/*' '**/src/**/*'",
     "lint:tsc": "yarn workspaces run lint",
-    "lint": "run-p -l lint:*"
+    "lint": "run-p -l lint:*",
+    "test": "run-p -l test:*",
+    "test:panel": "yarn workspace swr-devtools-panel test",
+    "test:devtools": "yarn workspace swr-devtools test"
   },
   "repository": "ssh://git@github.com/koba04/swr-devtools.git",
   "author": "Toru Kobayashi <koba0004@gmail.com>",

packages/swr-devtools-panel/package.json

@@ -28,20 +28,27 @@
     "build": "run-p build:*",
     "build:esm": "tsc",
     "build:cjs": "tsc -p tsconfig.cjs.json",
-    "lint": "tsc --noEmit"
+    "lint": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "peerDependencies": {
     "react": ">=17.0.2",
     "styled-components": "^5.3.0",
     "swr": ">=1.0.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
     "@types/react": "^18.0.20",
     "@types/styled-components": "^5.1.26",
+    "jsdom": "^21.1.1",
     "react": "^18.2.0",
     "styled-components": "^5.3.5",
     "swr": "^2.0.0",
-    "typescript": "^4.8.3"
+    "typescript": "^4.8.3",
+    "vite": "^4.2.0",
+    "vitest": "^0.29.3"
   },
   "dependencies": {
     "react-json-tree": "^0.17.0",

packages/swr-devtools-panel/test/integration.test.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { vi, describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import matchers from "@testing-library/jest-dom/matchers";
+import { SWRDevToolPanel } from "../src";
+import { EventEmitter } from "swr-devtools/lib/createSWRDevTools";
+
+expect.extend(matchers);
+vi.stubGlobal("matchMedia", () => ({
+  matches: false,
+}));
+
+describe("SWRDevToolPanel", () => {
+  it("should be able to render SWRDevToolPanel", () => {
+    render(<SWRDevToolPanel cache={new Map()} events={new EventEmitter()} />);
+    expect(screen.getByRole("heading")).toHaveTextContent("SWR");
+  });
+});

packages/swr-devtools-panel/tsconfig.json

@@ -66,5 +66,6 @@
     /* Advanced Options */
     "skipLibCheck": true,                     /* Skip type checking of declaration files. */
     "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
-  }
+  },
+  "include": ["src/"]
 }