fix svg and scss module mocks, get tests working with react/preact imports

__mocks__/imports/svg-comp-mock.ts

@@ -0,0 +1,6 @@
+export default {
+	src: "test.svg",
+	width: 24,
+	height: 24,
+	format: "svg",
+};

__mocks__/imports/svg-raw-mock.ts

@@ -0,0 +1 @@
+export default "<svg />";

jest.config.cjs

@@ -29,6 +29,7 @@ module.exports = {
 	// moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths),
 	moduleNameMapper: {
 		"^preact$": require.resolve("preact"),
+		"^react(-dom)?$": require.resolve("preact/compat"),
 		"^@testing-library\\/preact$": require.resolve("@testing-library/preact"),
 		// NextJS
 		// Handle CSS imports (with CSS modules)
@@ -38,7 +39,8 @@ module.exports = {
 		"^@/components/(.*)$": "<rootDir>/components/$1",
 		// UU Files
 		".+\\.(css|styl|less|sass|scss)$": `identity-obj-proxy`,
-		".+\\.svg$": `<rootDir>/__mocks__/svg-comp-mock.ts`,
+		".+\\.svg$": `<rootDir>/__mocks__/imports/svg-comp-mock.ts`,
+		".+\\.svg\\?raw$": `<rootDir>/__mocks__/imports/svg-raw-mock.ts`,
 		".+\\.(jpg|svg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)(?:\\?.+)?$": `<rootDir>/__mocks__/file-mock.ts`,
 		// UU TS
 		"^__mocks__/(.*)$": resolve(__dirname, "./__mocks__/$1"),

package-lock.json

@@ -11,7 +11,7 @@
 			"dependencies": {
 				"@floating-ui/react": "^0.24.3",
 				"medium-zoom": "^1.0.8",
-				"preact": "^10.15.1"
+				"preact": "^10.16.0"
 			},
 			"devDependencies": {
 				"@astrojs/image": "^0.17.1",
@@ -51,6 +51,7 @@
 				"hast-util-to-string": "^2.0.0",
 				"hastscript": "^7.2.0",
 				"husky": "^8.0.3",
+				"identity-obj-proxy": "^3.0.0",
 				"image-size": "^1.0.2",
 				"jest-environment-jsdom": "^29.5.0",
 				"jest-watch-typeahead": "^2.2.2",
@@ -9070,6 +9071,12 @@
 				"node": ">=6.0"
 			}
 		},
+		"node_modules/harmony-reflect": {
+			"version": "1.6.2",
+			"resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.2.tgz",
+			"integrity": "sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==",
+			"dev": true
+		},
 		"node_modules/has": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -9676,6 +9683,18 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/identity-obj-proxy": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz",
+			"integrity": "sha512-00n6YnVHKrinT9t0d9+5yZC6UBNJANpYEQvL2LlX6Ab9lnmxzIRcEmTPuyGScvl1+jKuCICX1Z0Ab1pPKKdikA==",
+			"dev": true,
+			"dependencies": {
+				"harmony-reflect": "^1.4.6"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
 		"node_modules/ieee754": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -16720,9 +16739,9 @@
 			"dev": true
 		},
 		"node_modules/preact": {
-			"version": "10.15.1",
-			"resolved": "https://registry.npmjs.org/preact/-/preact-10.15.1.tgz",
-			"integrity": "sha512-qs2ansoQEwzNiV5eAcRT1p1EC/dmEzaATVDJNiB3g2sRDWdA7b7MurXdJjB2+/WQktGWZwxvDrnuRFbWuIr64g==",
+			"version": "10.16.0",
+			"resolved": "https://registry.npmjs.org/preact/-/preact-10.16.0.tgz",
+			"integrity": "sha512-XTSj3dJ4roKIC93pald6rWuB2qQJO9gO2iLLyTe87MrjQN+HklueLsmskbywEWqCHlclgz3/M4YLL2iBr9UmMA==",
 			"funding": {
 				"type": "opencollective",
 				"url": "https://opencollective.com/preact"

package.json

@@ -77,6 +77,7 @@
 		"hast-util-to-string": "^2.0.0",
 		"hastscript": "^7.2.0",
 		"husky": "^8.0.3",
+		"identity-obj-proxy": "^3.0.0",
 		"image-size": "^1.0.2",
 		"jest-environment-jsdom": "^29.5.0",
 		"jest-watch-typeahead": "^2.2.2",
@@ -119,7 +120,7 @@
 	"dependencies": {
 		"@floating-ui/react": "^0.24.3",
 		"medium-zoom": "^1.0.8",
-		"preact": "^10.15.1"
+		"preact": "^10.16.0"
 	},
 	"overrides": {
 		"react": "npm:@preact/compat@latest",

src/components/pagination/pagination-popover.tsx

@@ -1,3 +1,4 @@
+import * as React from 'preact';
 import {
 	arrow,
 	FloatingArrow,

src/components/pagination/pagination.test.tsx

@@ -0,0 +1,17 @@
+import * as React from 'preact';
+import { render } from "@testing-library/preact";
+import { Pagination } from './pagination';
+
+test("Pagination renders", async () => {
+	const { baseElement, findByText } = render(
+		<Pagination
+			page={{
+				currentPage: 3,
+				lastPage: 8,
+			}}
+		/>
+	);
+
+	expect(baseElement).toBeInTheDocument();
+	expect(await findByText("3")).toBeInTheDocument();
+});

src/components/pagination/pagination.tsx

@@ -1,3 +1,4 @@
+import * as React from 'preact';
 import styles from "./pagination.module.scss";
 import forward from "src/icons/arrow_right.svg?raw";
 import back from "src/icons/arrow_left.svg?raw";