我正在尝试在我的Nextjs项目上设置单元测试。我已经按照官方Nextjs文档上的文档进行了设置。
我得到的问题似乎与config本身或@headlessui/react库及其导入方式有关。
当我尝试运行测试时，我得到以下错误消息：
元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。检查Listbox的渲染方法。
该组件在运行时和构建时工作正常。
这是我的项目的配置。

tsconfig.json

{
  "compilerOptions": {
    "target": "ES6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "baseUrl": "./",
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "exactOptionalPropertyTypes": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "forceConsistentCasingInFileNames": true,
    "removeComments": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

jest.config.mjs

import nextJest from 'next/jest.js';

const createJestConfig = nextJest({
  dir: './',
});

/** @type {import('jest').Config} */
const config = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  testEnvironment: 'jest-environment-jsdom',
  moduleDirectories: ['node_modules', '<rootDir>/'],
  testMatch: ['**/*.(test|spec).(js|jsx|ts|tsx)'],
  coveragePathIgnorePatterns: ['/node_modules/'],
};

export default createJestConfig(config);

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [{ protocol: 'https', hostname: '**.pixabay.com' }],
  },
  reactStrictMode: true,
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });
    return config;
  },
};

module.exports = nextConfig;

__tests__/components中的测试文件

import { render, screen } from '@testing-library/react';
import { ListType } from 'components/calculator/builder/utils/types/list';
import List from 'components/ui/fields/list/list';

jest.mock('components/calculator/context/hooks', () => ({
 // ... mock custom hook.
}));

const mockList: ListType = {
// ... mock data
};

const renderComponent = () => {
  render(<List list={mockList} />);
};

describe('List component', () => {
  test('check if the correct list options are displayed', () => {
    renderComponent();
    expect(screen.getAllByRole('option')).toHaveLength(mockList.options.length);
    expect(screen.getByText(mockList.description)).toBeInTheDocument();
    expect(screen.getByText(mockList.placeholder)).toBeInTheDocument();
  });
});

测试的实际组件的片段

import { Listbox } from '@headlessui/react'; // <= the actual Listbox import from node_modules
// some other inner imports

interface ListProps {
  list: ListType;
}

export default function List({ list }: ListProps) {
return (
    <Listbox>
       // ...implementation is irrelevant
    </Listbox>)
}

package.json

{
  "name": "cw-client",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "typescript": "tsc",
    "test": "jest",
    "test:ci": "jest --ci"
  },
  "engines": {
    "node": ">=19.3.0"
  },
  "dependencies": {
    "@dnd-kit/core": "^6.0.7",
    "@dnd-kit/modifiers": "^6.0.1",
    "@dnd-kit/sortable": "^7.0.2",
    "@dnd-kit/utilities": "^3.2.1",
    "@headlessui/react": "^1.7.7",
    "@next/font": "13.1.1",
    "lodash.debounce": "^4.0.8",
    "mathjs": "^11.6.0",
    "next": "13.1.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-number-format": "^5.1.4"
  },
  "devDependencies": {
    "@next/eslint-plugin-next": "^13.1.1",
    "@svgr/webpack": "^6.5.1",
    "@tailwindcss/forms": "^0.5.3",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@types/lodash.debounce": "^4.0.7",
    "@types/node": "18.11.17",
    "@types/react": "18.0.26",
    "@types/react-dom": "18.0.10",
    "@typescript-eslint/eslint-plugin": "^5.47.0",
    "@typescript-eslint/parser": "^5.47.0",
    "autoprefixer": "^10.4.13",
    "eslint": "8.30.0",
    "eslint-config-next": "13.1.1",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.31.11",
    "jest": "^29.5.0",
    "jest-environment-jsdom": "^29.5.0",
    "postcss": "^8.4.20",
    "prettier": "2.8.1",
    "prettier-plugin-tailwindcss": "^0.2.1",
    "tailwindcss": "^3.3.1",
    "typescript": "4.9.4"
  }
}

我已经检查了资源，大部分时间它们都与两个问题有关。
1.使用默认导出但导入命名模块。这不是我的情况，因为你可以看到基于预览，但事实上，组件在运行时工作。
1.没有使用函数返回实际的JSX（const component =〈/〉）。这也不是我的情况，但错误也略有不同，因为它说它是git object而不是undefined。
所以这些在我的情况下都没有帮助。而且我已经看到这可能是使用路径别名时的问题，然后将其添加到tsconfig.json中的path并在jest.config.json中进行修改。但由于我没有使用路径别名，我认为这无关紧要。
有趣的是，我试着使用来自Nextjs样板的repo进行测试，它工作了。但是我的应用程序已经很大了，可以重新开始。
我尝试过的一些其他选项是：
1.在顶部输入React。
1.将export default移动到底部。
这些都没有帮助。