賞金將在 6 天后到期。此問題的答案有資格獲得 50聲望賞金。 bonnopc希望引起更多關注這個問題：
如果您想贏得此賞金，則應解決該錯誤。
我正在使用 Next.js12.0.7和 Jest 28.1.0。并且，還使用該next-react-svg庫將我的 SVG 檔案匯入到組件中。這是我的jest.config.js檔案-
// jest.config.js
const nextJest = require("next/jest");
const createJestConfig = nextJest({
dir: "./",
});
const customJestConfig = {
setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
moduleNameMapper: {
"^@/(.*)$": "<rootDir>/src/$1",
},
moduleDirectories: ["node_modules", "<rootDir>/"],
modulePathIgnorePatterns: ["<rootDir>/tests/"],
testEnvironment: "jest-environment-jsdom",
transform: {
"^. \\.tsx?$": "ts-jest",
"^. \\.svg$": "<rootDir>/__mocks__/jest-svg-transformer.js",
},
};
module.exports = createJestConfig(customJestConfig);
這是jest-svg-transformer.js我試圖模擬 SVG 檔案的檔案 -
// __mocks__/jest-svg-transformer.js
const path = require("path");
module.exports = {
process(src, filePath) {
if (path.extname(filePath) !== ".svg") {
return src;
}
const name = `svg-${path.basename(filePath, ".svg")}`
.split(/\W /)
.map((x) => `${x.charAt(0).toUpperCase()}${x.slice(1)}`)
.join("");
return `
const React = require('react');
function ${name}(props) {
return React.createElement(
'svg',
Object.assign({}, props, {'data-file-name': ${name}.name})
)
}
module.exports = ${name}
`;
},
};
我在下面提到了嘗試運行時遇到的錯誤yarn test或jest.
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of `Loader`.
at text (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/src/modules/common/components/Loader/index.tsx:5:34)
at div
at LoginPage (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/src/modules/auth/components/LoginPage/index.tsx:17:47)
at Login
at Provider (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-redux/lib/components/Provider.js:21:20)
15 | <p className={styles.text}>
16 | <small>{text}</small>
> 17 | </p>
| ^
18 | ) : (
19 | ""
20 | )}
at printWarning (node_modules/react/cjs/react-jsx-runtime.development.js:117:30)
at error (node_modules/react/cjs/react-jsx-runtime.development.js:93:5)
at jsxWithValidation (node_modules/react/cjs/react-jsx-runtime.development.js:1152:7)
at Object.jsxWithValidationDynamic [as jsx] (node_modules/react/cjs/react-jsx-runtime.development.js:1209:12)
at Loader (src/modules/common/components/Loader/index.tsx:17:58)
at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14985:18)
at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17811:13)
console.error
Error: Uncaught [Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of `Loader`.]
at reportException (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
at innerInvokeEventListeners (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:343:9)
at invokeEventListeners (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:276:3)
at HTMLUnknownElementImpl._dispatch (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:223:9)
at HTMLUnknownElementImpl.dispatchEvent (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
at HTMLUnknownElement.dispatchEvent (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34)
at Object.invokeGuardedCallbackDev (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
at invokeGuardedCallback (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
at beginWork$1 (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:23964:7)
at performUnitOfWork (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:22779:12) {
detail: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of `Loader`.
at createFiberFromTypeAndProps (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:25058:21)
at createFiberFromElement (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:25086:15)
at reconcileSingleElement (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:14052:23)
at reconcileChildFibers (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:14112:35)
at reconcileChildren (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:16990:28)
at updateHostComponent (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:17632:3)
at beginWork (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:19080:14)
at HTMLUnknownElement.callCallback (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:3945:14)
at HTMLUnknownElement.callTheUserObjectsOperation (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
at innerInvokeEventListeners (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:340:25)
at invokeEventListeners (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:276:3)
at HTMLUnknownElementImpl._dispatch (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:223:9)
at HTMLUnknownElementImpl.dispatchEvent (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
at HTMLUnknownElement.dispatchEvent (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34)
at Object.invokeGuardedCallbackDev (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
at invokeGuardedCallback (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
at beginWork$1 (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:23964:7)
at performUnitOfWork (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:22779:12)
at workLoopSync (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:22707:5)
at renderRootSync (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:22670:7)
at performSyncWorkOnRoot (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:22293:18)
at scheduleUpdateOnFiber (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:21881:7)
at updateContainer (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:25482:3)
at /Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:26021:7
at unbatchedUpdates (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:22431:12)
at legacyRenderSubtreeIntoContainer (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:26020:5)
at Object.render (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:26103:10)
at /Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/@testing-library/react/dist/pure.js:101:25
at batchedUpdates$1 (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom.development.js:22380:12)
at act (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-dom/cjs/react-dom-test-utils.development.js:1042:14)
at Object.render (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/@testing-library/react/dist/pure.js:97:26)
at Object.<anonymous> (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/__tests__/index.test.tsx:9:11)
at Promise.then.completed (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jest-circus/build/utils.js:333:28)
at new Promise (<anonymous>)
at callAsyncCircusFn (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jest-circus/build/utils.js:259:10)
at _callCircusTest (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jest-circus/build/run.js:277:40)
at processTicksAndRejections (node:internal/process/task_queues:95:5)
at _runTest (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jest-circus/build/run.js:209:3)
at _runTestsForDescribeBlock (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jest-circus/build/run.js:97:9)
at _runTestsForDescribeBlock (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jest-circus/build/run.js:91:9)
at run (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jest-circus/build/run.js:31:3)
at runAndTransformResultsToJestFormat (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:135:21)
at jestAdapter (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:92:19)
at runTestInternal (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jest-runner/build/runTest.js:411:16)
at runTest (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jest-runner/build/runTest.js:499:34)
at TestRunner.runTests (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jest-runner/build/index.js:145:12)
at TestScheduler.scheduleTests (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/@jest/core/build/TestScheduler.js:317:13)
at runJest (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/@jest/core/build/runJest.js:407:19)
at _run10000 (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/@jest/core/build/cli/index.js:339:7)
at runCLI (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/@jest/core/build/cli/index.js:190:3)
at Object.run (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/jest-cli/build/cli/index.js:155:37),
type: 'unhandled exception'
}
at VirtualConsole.<anonymous> (node_modules/jest-environment-jsdom/build/index.js:70:23)
at reportException (node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:70:28)
at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:343:9)
at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:276:3)
at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:223:9)
at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
console.error
The above error occurred in the <div> component:
at div
at div
at text (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/src/modules/common/components/Loader/index.tsx:5:34)
at div
at LoginPage (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/src/modules/auth/components/LoginPage/index.tsx:17:47)
at Login
at Provider (/Users/prosenjitchowdhury/dev/multiplyr/dhaka-frontend/node_modules/react-redux/lib/components/Provider.js:21:20)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
at logCapturedError (node_modules/react-dom/cjs/react-dom.development.js:20085:23)
at update.callback (node_modules/react-dom/cjs/react-dom.development.js:20118:5)
at callCallback (node_modules/react-dom/cjs/react-dom.development.js:12318:12)
at commitUpdateQueue (node_modules/react-dom/cjs/react-dom.development.js:12339:9)
at commitLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:20736:11)
at commitLayoutEffects (node_modules/react-dom/cjs/react-dom.development.js:23426:7)
at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:3945:14)
FAIL __tests__/index.test.tsx
Home
? renders a heading (37 ms)
● Home ? renders a heading
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of `Loader`.
7 | describe("Home", () => {
8 | it("renders a heading", () => {
> 9 | render(
| ^
10 | <Provider store={store}>
11 | <Login />
12 | </Provider>
at createFiberFromTypeAndProps (node_modules/react-dom/cjs/react-dom.development.js:25058:21)
at createFiberFromElement (node_modules/react-dom/cjs/react-dom.development.js:25086:15)
at reconcileSingleElement (node_modules/react-dom/cjs/react-dom.development.js:14052:23)
at reconcileChildFibers (node_modules/react-dom/cjs/react-dom.development.js:14112:35)
at reconcileChildren (node_modules/react-dom/cjs/react-dom.development.js:16990:28)
at updateHostComponent (node_modules/react-dom/cjs/react-dom.development.js:17632:3)
at beginWork (node_modules/react-dom/cjs/react-dom.development.js:19080:14)
at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:3945:14)
at HTMLUnknownElement.callTheUserObjectsOperation (node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:340:25)
at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:276:3)
at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:223:9)
at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34)
at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:3994:16)
at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:4056:31)
at beginWork$1 (node_modules/react-dom/cjs/react-dom.development.js:23964:7)
at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:22779:12)
at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:22707:5)
at renderRootSync (node_modules/react-dom/cjs/react-dom.development.js:22670:7)
at performSyncWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:22293:18)
at scheduleUpdateOnFiber (node_modules/react-dom/cjs/react-dom.development.js:21881:7)
at updateContainer (node_modules/react-dom/cjs/react-dom.development.js:25482:3)
at node_modules/react-dom/cjs/react-dom.development.js:26021:7
at unbatchedUpdates (node_modules/react-dom/cjs/react-dom.development.js:22431:12)
at legacyRenderSubtreeIntoContainer (node_modules/react-dom/cjs/react-dom.development.js:26020:5)
at Object.render (node_modules/react-dom/cjs/react-dom.development.js:26103:10)
at node_modules/@testing-library/react/dist/pure.js:101:25
at batchedUpdates$1 (node_modules/react-dom/cjs/react-dom.development.js:22380:12)
at act (node_modules/react-dom/cjs/react-dom-test-utils.development.js:1042:14)
at Object.render (node_modules/@testing-library/react/dist/pure.js:97:26)
at Object.<anonymous> (__tests__/index.test.tsx:9:11)
at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:317:13)
at runJest (node_modules/@jest/core/build/runJest.js:407:19)
at _run10000 (node_modules/@jest/core/build/cli/index.js:339:7)
at runCLI (node_modules/@jest/core/build/cli/index.js:190:3)
Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 total
Snapshots: 0 total
Time: 0.966 s, estimated 1 s
Ran all test suites.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
這是失敗的測驗 -
// __tests__/index.test.tsx
import { render, screen } from "@testing-library/react";
import "@testing-library/jest-dom";
import { Provider } from "react-redux";
import { store } from "@/store";
import Login from "@/pages/login";
describe("Home", () => {
it("renders a heading", () => {
render(
<Provider store={store}>
<Login />
</Provider>
);
const heading = screen.getByTestId("page-loader-element");
expect(heading).toBeInTheDocument();
});
});
這是向我拋出錯誤的組件 -
// src/modules/common/components/Loader/index.tsx
import React from "react";
import Logo from "@/assets/icons/Logo.svg";
import styles from "./Loader.module.scss";
export default function Loader({ text }: { text?: string }) {
return (
<div
className="d-flex flex-column justify-content-center align-items-center w-100 my-3"
data-testid="page-loader-element"
>
<div className="animate__animated animate__pulse animate__infinite infinite">
<Logo />
</div>
{text ? (
<p className={styles.text}>
<small>{text}</small>
</p>
) : (
""
)}
</div>
);
}
這是我的jest.setup.js檔案-
// jest.setup.js
import "@testing-library/jest-dom/extend-expect";
這些是我正在使用的相關庫的版本 -
// package.json
// ...
"dependencies": {
"next": "^12.0.7",
"next-react-svg": "1.1.3",
// ...
},
"devDependencies": {
// ...
"@types/jest": "^28.1.1",
"babel-jest": "^28.1.0",
"jest": "^28.1.0",
"jest-cli": "28.1.0",
"jest-environment-jsdom": "^28.1.0",
"jest-svg-transformer": "^1.0.0",
"ts-jest": "^28.0.4",
"typescript": "4.4.3"
},
"resolutions": {
"@types/react": "17.0.2",
"@types/react-dom": "17.0.2"
},
//...
最后，這就是我當前tsconfig.json檔案的樣子 -
// tsconfig.json
{
"compilerOptions": {
// ...
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
},
},
"include": [
"next-env.d.ts",
"additional.d.ts",
"decs.d.ts",
"**/*.ts",
"**/*.tsx",
"jest.setup.js"
],
"exclude": ["node_modules", "playwright.config.ts"],
"ts-node": {
"transpileOnly": true,
"files": true,
"compilerOptions": {
"rootDir": "."
}
}
}
我也嘗試使用jest-svg-transformer庫。但沒有運氣！
uj5u.com熱心網友回復：
最后通過將 Next.js 版本從升級12.0.7到12.1.0. 根據這個官方博客（又名 changelog），Next.js 12.1 提供了一個零配置 Jest 插件。
所以，這是我現在正在使用的簡化jest.config.js檔案（根據官方檔案）：
const nextJest = require("next/jest");
const createJestConfig = nextJest({
dir: "./",
});
const customJestConfig = {
setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
moduleNameMapper: {
"^@/(.*)$": "<rootDir>/src/$1", // as all of my files are stored in ./src directory, & I have setup my paths to be compiled as `"@/*": ["src/*"]` in my tsconfig.json file
},
moduleDirectories: ["node_modules", "<rootDir>/"],
modulePathIgnorePatterns: ["<rootDir>/tests/"], // the directory I want jest to ignore
testEnvironment: "jest-environment-jsdom",
};
module.exports = createJestConfig(customJestConfig);
正如您在此處看到的，我不再使用任何模擬檔案來模擬或轉換我的 SVG 檔案。我開始使用@svgr/webpack而不是使用next-react-svg在我的專案中匯入 SVG 檔案。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/489936.html
標籤：javascript 反应 svg 开玩笑的 下一个.js