我正在使用 Next.js12.0.7和 Jest28.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.ign({}, 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 cl/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 clName={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 cl/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 cl/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 cl/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 "@/ets/icons/Logo.svg";
import styles from "./Loader.module.scss";
export default function Loader({ text }: { text?: string }) {
  return (
    <div
      clName="d-flex flex-column justify-content-center align-items-center w-100 my-3"
      data-testid="page-loader-element"
    >
      <div clName="animate__animated animate__pulse animate__infinite    infinite">
        <Logo />
      </div>
      {text ? (
        <p clName={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库。但没有运气！