Update jest.config.js

etc/jest.config.js

@@ -1,7 +1,10 @@
+const path = require("path");
+const toptions = { tsconfig: "<rootDir>/etc/tsconfig.json" }
 module.exports = {
-  preset: 'ts-jest',
+  rootDir: path.resolve(__dirname, ".."),
+  transform: { "^.+\\.(ts|tsx)$": ["ts-jest", toptions]},
+  preset: "ts-jest",
   testEnvironment: "jsdom",
-  "moduleNameMapper": {
-    "^~/(.*)$": "<rootDir>/src/js/$1"
-  }
+  moduleNameMapper: { "^~/(.*)$": "<rootDir>/src/js/$1" },
+  moduleFileExtensions: ["js", "ts", "tsx"],
 };

etc/tsconfig.json

@@ -12,6 +12,7 @@
     "moduleResolution": "node",
     "esModuleInterop": true,
     "jsx": "react-jsx",
+    "jsxImportSource": "preact",
     "lib": [ "ES2020", "DOM" ],
     "baseUrl": "../src/",
     "paths": { "~/*": ["js/*"] },

etc/webpack.common.js

@@ -20,7 +20,7 @@ module.exports = {
       "react/jsx-runtime": "preact/jsx-runtime",
     },
     modules: [path.resolve(__dirname, "..", "node_modules")],
-    extensions: [".ts", ".tsx"]
+    extensions: [".js", ".ts", ".tsx"]
   },
   module: {
     rules: [
@@ -30,7 +30,7 @@ module.exports = {
         exclude: /node_modules/,
         options: {
           loader: "tsx",
-          target: "es2015"
+          target: "ES5"
         }
       },
     ],

package.json

@@ -9,11 +9,10 @@
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.4",
+    "@testing-library/preact": "^3.2.4",
     "@testing-library/react": "^16.0",
     "@types/chrome": "^0.0.269",
     "@types/jest": "^29.5",
-    "@types/react": "^18.3",
-    "@types/react-dom": "^18.3",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^12.0",
     "esbuild-loader": "^4.2",
@@ -23,7 +22,7 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "prettier": "^3.3",
-    "ts-jest": "^29.2",
+    "ts-jest": "^29.2.5",
     "typescript": "^5.5",
     "typescript-eslint": "^8.0.0",
     "webpack": "^5.93",

test/App.test.tsx

@@ -1,6 +1,5 @@
-import React from "react";
 import '@testing-library/jest-dom';
-import { render, screen, act } from "@testing-library/react";
+import { render, screen, act } from "@testing-library/preact";
 import { App } from "~/components/App";
 import { getMessage } from "./mocks/chrome.i18n";
 import { success, error, loading } from "./mocks/fetch";
@@ -33,7 +32,7 @@ describe("App.tsx", () => {
     afterEach(() => { global.fetch = globalFetch; });
 
     test("response is rendered", async () => {
-      await act(() => render(<App/>));
+      await act(() => { render(<App/>) });
       expect(screen.getByTestId("response")).toBeInTheDocument();
     });
   });
@@ -43,7 +42,7 @@ describe("App.tsx", () => {
     afterEach(() => { global.fetch = globalFetch; });
 
     test("error is rendered", async () => {
-      await act(() => render(<App/>));
+      await act(() => { render(<App/>) });
       expect(screen.getByTestId("error")).toBeInTheDocument();
     });
   });