From d7b8a550b0aba262f0c1c55f6ad9b554f0f050ad Mon Sep 17 00:00:00 2001 From: James Fenn Date: Tue, 11 Jul 2023 12:04:57 -0400 Subject: [PATCH] fix svg and scss module mocks, get tests working with react/preact imports --- __mocks__/imports/svg-comp-mock.ts | 6 +++++ __mocks__/imports/svg-raw-mock.ts | 1 + jest.config.cjs | 4 ++- package-lock.json | 27 ++++++++++++++++--- package.json | 3 ++- .../pagination/pagination-popover.tsx | 1 + src/components/pagination/pagination.test.tsx | 17 ++++++++++++ src/components/pagination/pagination.tsx | 1 + 8 files changed, 54 insertions(+), 6 deletions(-) create mode 100644 __mocks__/imports/svg-comp-mock.ts create mode 100644 __mocks__/imports/svg-raw-mock.ts create mode 100644 src/components/pagination/pagination.test.tsx diff --git a/__mocks__/imports/svg-comp-mock.ts b/__mocks__/imports/svg-comp-mock.ts new file mode 100644 index 00000000..2e60d9dc --- /dev/null +++ b/__mocks__/imports/svg-comp-mock.ts @@ -0,0 +1,6 @@ +export default { + src: "test.svg", + width: 24, + height: 24, + format: "svg", +}; diff --git a/__mocks__/imports/svg-raw-mock.ts b/__mocks__/imports/svg-raw-mock.ts new file mode 100644 index 00000000..b500678a --- /dev/null +++ b/__mocks__/imports/svg-raw-mock.ts @@ -0,0 +1 @@ +export default ""; diff --git a/jest.config.cjs b/jest.config.cjs index e2d7eb2f..7df995d4 100644 --- a/jest.config.cjs +++ b/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/(.*)$": "/components/$1", // UU Files ".+\\.(css|styl|less|sass|scss)$": `identity-obj-proxy`, - ".+\\.svg$": `/__mocks__/svg-comp-mock.ts`, + ".+\\.svg$": `/__mocks__/imports/svg-comp-mock.ts`, + ".+\\.svg\\?raw$": `/__mocks__/imports/svg-raw-mock.ts`, ".+\\.(jpg|svg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)(?:\\?.+)?$": `/__mocks__/file-mock.ts`, // UU TS "^__mocks__/(.*)$": resolve(__dirname, "./__mocks__/$1"), diff --git a/package-lock.json b/package-lock.json index f42afffb..f8bbbe80 100644 --- a/package-lock.json +++ b/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" diff --git a/package.json b/package.json index 2267f878..e643198e 100644 --- a/package.json +++ b/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", diff --git a/src/components/pagination/pagination-popover.tsx b/src/components/pagination/pagination-popover.tsx index 97f1f09b..248d2c87 100644 --- a/src/components/pagination/pagination-popover.tsx +++ b/src/components/pagination/pagination-popover.tsx @@ -1,3 +1,4 @@ +import * as React from 'preact'; import { arrow, FloatingArrow, diff --git a/src/components/pagination/pagination.test.tsx b/src/components/pagination/pagination.test.tsx new file mode 100644 index 00000000..03d0b6ee --- /dev/null +++ b/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( + + ); + + expect(baseElement).toBeInTheDocument(); + expect(await findByText("3")).toBeInTheDocument(); +}); diff --git a/src/components/pagination/pagination.tsx b/src/components/pagination/pagination.tsx index 825cc8cd..7d21172b 100644 --- a/src/components/pagination/pagination.tsx +++ b/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";