Next.js + Jest渲染组件报错：组件导入无效

测试渲染InputSample组件时抛出以下错误：

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

相关代码文件 #

测试文件（inputsample.test.js） #

import InputSample from './inputsample';
import { render } from '@testing-library/react';

it('render name input sample', async () => {
  const wrapper = render(<InputSample />);
  expect('Test').toEqual('Test');
});

组件文件（inputsample.js） #

import React from 'react';
import { Input } from 'theme-ui';
import { theme } from 'theme';
import { ThemeProvider } from 'theme-ui';

const InputSample = (props) => {
  return (
    <div>
      <ThemeProvider theme={theme}>
        <Input name="siap" value="siap" />
      </ThemeProvider>
    </div>
  );
};

export default InputSample;

theme-ui库的Input类型定义（Input.d.ts） #

import React from 'react';
import { BoxOwnProps } from './Box';
import type { Assign, ForwardRef } from './types';
export interface InputProps extends Assign<React.ComponentPropsWithRef<'input'>, BoxOwnProps> {
    autofillBackgroundColor?: string;
}
/**
 * Input variants can be defined in `theme.forms`
 * and the component uses the `theme.forms.input` variant by default.
 */
export declare const Input: ForwardRef<HTMLInputElement, InputProps>;

已尝试的解决方案 #

• 调整组件导入语法（如从命名导入改为默认导入），但问题未解决

配置文件 #

jest.config.js #

const nextJest = require('next/jest');
const createJestConfig = nextJest({
  dir: './'
});
const customJestConfig = {
  moduleDirectories: ['node_modules', '../../node_modules', 'tests'],
  testEnvironment: 'jest-environment-jsdom',
  setupFilesAfterEnv: ['<rootDir>/src/tests/jest.setup.js'],

  collectCoverageFrom: ['<rootDir>/src/**/*.{ts,tsx,js,jsx}'],
  moduleNameMapper: {
    '#(.*)': '<rootDir>/node_modules/$1',
    components: '<rootDir>/src/components',
    theme: '<rootDir>/src/theme',
    '^components/(.*)$': '<rootDir>/src/components/$1',
    '^graphql/(.*)$': '<rootDir>/src/graphql/$1',
    '^domain/(.*)$': '<rootDir>/src/domain/$1',
    '^utils/(.*)$': '<rootDir>/src/utils/$1',
    '^theme/(.*)$': '<rootDir>/src/theme/$1',
    '^constants/(.*)$': '<rootDir>/src/constants/$1',
    '^context/(.*)$': '<rootDir>/src/context/$1',
    '^tests/(.*)$': '<rootDir>/src/tests/$1',
    '\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/__mocks__/fileMock.js'
  }
};
module.exports = createJestConfig(customJestConfig);

jest.setup.js #

import '@testing-library/jest-dom';

可行的解决方向 #

1. 排查theme-ui的Input导出问题
   虽然类型定义显示Input是命名导出，但实际运行时可能存在导出异常。可以尝试直接指定组件路径导入：

   import Input from 'theme-ui/src/components/Input';
   

   同时检查theme-ui版本，部分版本可能存在组件导出路径变更的情况。

2. 在测试中Mock theme-ui组件
   绕过库本身的导出问题，直接在测试文件中Mock Input和ThemeProvider：

   jest.mock('theme-ui', () => ({
     ...jest.requireActual('theme-ui'),
     Input: jest.fn(() => <input />),
     ThemeProvider: ({ children }) => children
   }));
   

3. 检查Jest模块映射规则
   jest.config.js中的#(.*)映射可能干扰theme-ui的内部导入逻辑，尝试暂时注释该规则，验证是否解决问题：

   // '#(.*)': '<rootDir>/node_modules/$1',
   

4. 验证主题对象的导入正确性
   确保import { theme } from 'theme'能正确获取主题对象，尝试替换为相对路径导入：

   import { theme } from '../theme'; // 根据实际项目结构调整路径
   

内容的提问来源于stack exchange，提问作者andika_kurniawan