使用@chakra-ui/react编写组件时测试报错：未找到Box导出

API 探路者

2026-8-13

Chakra UI组件测试报错：The requested module '@chakra-ui/react' does not provide an export named 'Box'

我在用@chakra-ui/react编写组件，组件本身能正常渲染，但使用react-testing-library编写的测试用例执行失败，报错信息为：
The requested module '@chakra-ui/react' does not provide an export named 'Box'

组件代码

import { Box } from '@chakra-ui/react';
import React from 'react';

const Sample = () => {
    return (
        <Box>This is a simple Box</Box>
    );
};

export default Sample;

测试用例代码

import React from "react"
import '@testing-library/jest-dom';
import Sample from "./Sample"
import { render } from "@testing-library/react";

describe("<EntitySearch/>",()=>{
    it("Renders <Sample/> Component",()=>{
        const {getByText}=render(<Sample/>);       
        expect(getByText(/Entity/i)).toBeInTheDocument();
    })
})

Jest配置

{
    preset: 'ts-jest',
    "testEnvironment":"jest-environment-jsdom",
    extensionsToTreatAsEsm: ['.ts','.tsx'],
    moduleNameMapper: {
      '^(\\.{1,2}/.*)\\.js$': '$1',
    },
    transform: {
      '^.+\\.tsx?$': [
        'ts-jest',
        {
          useESM: true,
        },
      ],
    }
};