React函数组件用Jest做单元测试报symbol is not a function错误如何解决

云上老周

2026-9-30

问题修复方案

存在的问题

组件未导入memo：你在组件末尾用memo包装组件，但是头部导入React时没有引入memo，运行时调用未定义的memo会触发类型错误，就是你遇到的符号相关报错的核心原因。
上下文未注入：组件依赖AuthContext获取用户信息，测试时直接渲染组件没有在外层包裹对应的Provider传入值，useContext拿到的初始值如果不是对象，解构user会触发报错。
测试代码变量错误：测试中定义的变量是mockAction，但断言时用了不存在的accAction变量，同时断言对象和预期类名不匹配，逻辑完全错误。

修复后的代码

DemoContainer.js

import React, { useContext, memo } from 'react';

import { AuthContext, UiContext } from 'Stores';

const DemoContainer = () => {
    const { user } = useContext(AuthContext);

    return (
        <div data-testid='demo-container' className='demo__container'>
            <h1>{user}</h1>
        </div>
    );
};

export default memo(DemoContainer);

DemoContainer.test.js

import React from 'react';
import DemoContainer from '../demoContainer';
import { render, cleanup } from '@testing-library/react';
import '@testing-library/jest-dom';
import { AuthContext } from 'Stores';

afterEach(cleanup);

it('renders correctly', () => {
    // 模拟AuthContext传入的值
    const mockAuthValue = {
        user: '测试用户'
    };
    // 外层包裹Provider注入模拟上下文
    const { getByTestId } = render(
        <AuthContext.Provider value={mockAuthValue}>
            <DemoContainer className='demo-container' />
        </AuthContext.Provider>
    );
    const container = getByTestId('demo-container');
    // 验证容器类名
    expect(container).toHaveClass('demo__container');
    // 验证用户信息渲染正常
    expect(container.querySelector('h1')).toHaveTextContent('测试用户');
});