Merge branch '3-change-testing-framework-to-jest' into 'main'

Resolve "Change testing framework to Jest"

Closes #3

See merge request !1

.gitignore

 .snowpack
 build
-node_modules
+node_modules/
\ No newline at end of file
+.pnpm-store

jest.config.js

+// jest.config.js
+// Example: extending a pre-built Jest configuration file
+module.exports = {
+    ...require('@snowpack/app-scripts-react/jest.config.js')(),
+  };
\ No newline at end of file

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "start": "snowpack dev",
     "build": "snowpack build",
-    "test": "web-test-runner \"src/**/*.test.tsx\"",
+    "test": "jest \"src/**/*.test.tsx\" --coverage --watchAll",
     "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
     "lint": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\""
   },
@@ -21,18 +21,16 @@
     "react-dom": "^17.0.0"
   },
   "devDependencies": {
+    "@snowpack/app-scripts-react": "^2.0.0",
     "@snowpack/plugin-dotenv": "^2.0.5",
     "@snowpack/plugin-react-refresh": "^2.4.0",
     "@snowpack/plugin-typescript": "^1.2.0",
-    "@snowpack/web-test-runner-plugin": "^0.2.0",
     "@testing-library/react": "^11.0.0",
-    "@types/chai": "^4.2.13",
-    "@types/mocha": "^8.2.0",
+    "@types/jest": "^26.0.20",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/snowpack-env": "^2.3.2",
-    "@web/test-runner": "^0.12.0",
-    "chai": "^4.2.0",
+    "jest-cli": "^26.6.3",
     "prettier": "^2.0.5",
     "rxjs": "^6.6.3",
     "snowpack": "^3.0.11",

src/App.test.tsx

 import * as React from 'react';
 import { render } from '@testing-library/react';
-import { expect } from 'chai';
 import App from './App';
 
 describe('<App>', () => {

src/App.tsx

 import React, { useState, useEffect } from 'react';
 import logo from './logo.svg';
 import './App.css';
-import Features from './Features';
 
 interface AppProps {}
 
 function App({}: AppProps) {
-  // Create the count state.
-  const [count, setCount] = useState(0);
-  // Create the counter (+1 every second).
-  useEffect(() => {
-    const timer = setTimeout(() => setCount(count + 1), 1000);
-    return () => clearTimeout(timer);
-  }, [count, setCount]);
   // Return the App component.
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>Boilerplate with: <Features/></p>
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <p>
-          Page has been open for <code>{count}</code> seconds.
-        </p>
-        <p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </p>
-      </header>
-    </div>
+    <div>learn react</div>
   );
 }
 

src/Features.tsx

-
-import React, { useEffect, useState } from 'react';
-
-import { of, Observable } from 'rxjs';
-
-function useObservable<T>(observable: Observable<T>, defaultState: T) {
-    const [state, setState] = useState(defaultState);
-
-    useEffect(() => {
-        const sub = observable.subscribe(setState);
-        return () => sub.unsubscribe();
-    }, [observable]);
-
-    return state;
-};
-
-function Features() {
-    // Fake a list of data received in some events..
-    const features$ = of(["React", "Snowpack", "TypeScript", "RxJs"]);
-    
-    const features = useObservable<string[]>(features$, []);
-    // Return the Feature list.
-    return (
-        <ul>
-            {features.map(feature => <li>{feature}</li>)}
-        </ul>
-    );
-}
-
-export default Features;
-

web-test-runner.config.js

-// NODE_ENV=test - Needed by "@snowpack/web-test-runner-plugin"
-process.env.NODE_ENV = 'test';
-
-module.exports = {
-  plugins: [require('@snowpack/web-test-runner-plugin')()],
-};